Javascript 为什么道具没有被历史所取代？

签名 我正在使用history.push重定向页面，但同时我也在传递“用户名”，但我无法在重定向页面“ADMIN.JS”中看到该用户名。由于用户名用户输入该用户名，我希望在重定向页面中看到它。admin.js中的所有其他内容都可见，但只有{username}不可见

  import withRoot from './modules/withRoot';
// --- Post bootstrap -----
import React, { useState } from 'react';
import history from './history';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { Field } from 'react-final-form';
import Typography from './modules/components/Typography';
import AppFooter from './modules/views/AppFooter';
import AppAppBar from './modules/views/AppAppBar';
import Axios from 'axios';
import AppForm from './modules/views/AppForm';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { email, required } from './modules/form/validation';
import RFTextField from './modules/form/RFTextField';
import FormButton from './modules/form/FormButton';
import FormFeedback from './modules/form/FormFeedback';
import TextField from '@material-ui/core/TextField';
import Home from './Home';
import Dashb from './Dashb';



const useStyles = makeStyles((theme) => ({
  form: {
    marginTop: theme.spacing(6),
  },
  button: {
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(2),
  },
  feedback: {
    marginTop: theme.spacing(2),
  },
}));

const SignIn = (props) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [status, setStatus] = useState(true);
  const classes = useStyles();
  let demo;
  function validateForm() {
    if(username.length==3 && password.length==6 )
    return 1;
    
  }

  function setIncorrect() {
    setStatus(false);
  }



  function setCorrect() {
    setStatus(true);
  }


 


  const handleSubmit = (event) => {
    event.preventDefault()
  
    let user =  Axios.get(
      'http://localhost:9000/admin-service/admin/check/' +
        username +
        '/' +
        password
    )
      .then(response => {
        demo = response.data
        if (demo == true) {
          props.history.push({
            pathname: '/admin',
            username
          });
          console.log('####')
          
        } else{
          console.log('not true')
          Functions();
      }
      })
      .catch(error => {
        console.log(error.response.data)
        setIncorrect()
      })
  };

  function Functions() {
    alert("PLEASE ENTER CORRECT CREDENTIALS!!!!!!!!!!")
}

  return (
    <React.Fragment>
      <AppAppBar />
      <AppForm>
        <React.Fragment>
          <Typography variant="h3" gutterBottom marked="center" align="center">
            Admin Sign In
          </Typography>
        </React.Fragment>

        <form onSubmit={handleSubmit} className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="username"
            label="Admin-Id"
            name="username"
            autoFocus
            onChange={e => { setUsername(e.target.value); setCorrect() }}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            onChange={e => { setPassword(e.target.value); setCorrect() }}
          />
          {(!status) && <Alert severity="error">Incorrect credentials. Please try again</Alert>}

          <FormButton
            type="submit"
            className={classes.button}
            disabled={!validateForm()}
            size="large"
            color="secondary"
            fullWidth
          >
            Sign In
              </FormButton>
        </form>
        


        <Typography align="center">
          <Link underline="always" href="/premium-themes/onepirate/forgot-password/">
            Forgot password?
          </Link>
          <p>NOTE-PASSWORD IS YOUR USER PIN</p>
        </Typography>
      </AppForm>
      

    </React.Fragment>


  );
}

export default SignIn;

import withRoot from./modules/withRoot'；
//---后引导-----
从“React”导入React，{useState}；
从“./history”导入历史记录；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Link”导入链接；
从“react bootstrap”导入{FormGroup、FormControl、ControlLabel}；
从“react final form”导入{Field}；
从“./模块/组件/排版”导入排版；
从“./modules/views/AppFooter”导入AppFooter；
从“./modules/views/AppAppBar”导入AppAppBar；
从“Axios”导入Axios；
从“./modules/views/AppForm”导入AppForm；
从“@material ui/core/Button”导入按钮；
从“react bootstrap”导入{Alert}；
从“./modules/form/validation”导入{电子邮件，必需}；
从“./modules/form/RFTextField”导入RFTextField；
从“./modules/form/FormButton”导入FormButton；
从“./modules/form/FormFeedback”导入FormFeedback；
从“@material ui/core/TextField”导入TextField；
从“./主页”导入主页；
从“/Dashb”导入Dashb；
const useStyles=makeStyles（（主题）=>({
表格：{
marginTop：主题。间距（6），
},
按钮：{
marginTop：主题。间距（3），
marginBottom：主题。间距（2），
},
反馈：{
marginTop：主题。间距（2），
},
}));
常量符号=（道具）=>{
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[status，setStatus]=使用状态（true）；
const classes=useStyles（）；
让演示；
函数validateForm（）{
if（username.length==3&&password.length==6）
返回1；
}
函数setError（）{
设置状态（假）；
}
函数setCorrect（）{
设置状态（真）；
}
const handleSubmit=（事件）=>{
event.preventDefault（）
让user=Axios.get(
'http://localhost:9000/admin-服务/管理/检查/'+
用户名+
'/' +
密码
)
。然后（响应=>{
demo=response.data
if（demo==true）{
道具，历史，推({
路径名：'/admin'，
用户名
});
console.log（'#####'）
}否则{
console.log（'不正确'）
函数（）；
}
})
.catch（错误=>{
console.log（error.response.data）
设置错误（）
})
};
函数函数（）{
警报（“请输入正确的凭据！！！！！！！”）
}
返回(
管理员登录
{setUsername（e.target.value）；setCorrect（）}
/>
{setPassword（e.target.value）；setCorrect（）}
/>
{（！status）&&凭据不正确。请重试}
登录
忘记密码了？
注意：密码是您的用户PIN

);
}
导出默认签名；

Admin.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home.js';
import { Button } from 'react-bootstrap';



const Admin = props => {
  const { username } =
    (props.location && props.location.state) || {};
  return (
    <div>
      <br/>
      <br/>
        <h2> Username </h2> {username}
        <h1>child component-MILAN</h1>
      </div>
  );
}
export default Admin;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/Home.js”导入Home；
从“react bootstrap”导入{Button}；
const Admin=props=>{
常量{username}=
（props.location&&props.location.state）|{}；
返回(




用户名{Username}
子组件米兰
);
}
导出默认管理员；

我认为您需要传递一个对象作为第二个参数：

props.history.push({
  pathname: '/admin',
  {username}
});

---

我认为您需要传递一个对象作为第二个参数：

props.history.push({
  pathname: '/admin',
  {username}
});

正如您在中所读到的：

传递

状态

：

history.push({
  pathname: '/admin',
  state: {
    username: username
  }
});

const username = history.location.state?.username

并从

状态读取：

history.push({
  pathname: '/admin',
  state: {
    username: username
  }
});

const username = history.location.state?.username

正如您在中所读到的：

传递
状态
：

history.push({
  pathname: '/admin',
  state: {
    username: username
  }
});

const username = history.location.state?.username

并从
状态读取：

history.push({
  pathname: '/admin',
  state: {
    username: username
  }
});

const username = history.location.state?.username

它说什么？它说什么？