javascript - this.props.history.push ("/") 没有将我重定向到主页

Question

我正在尝试将此登录页面重定向到主页，但由于某些原因 this.props.history.push('/') 没有重定向它。我有一个 handleSubmit，它应该在我按下登录按钮后运行。我不太确定发生了什么。按下登录按钮会运行 handleSubmit，但它恰好在 this.props.history.push('/') 处进入捕获状态。感谢您的帮助。

App.js

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Provider store={store}>
          <Router>
            {/* <Navbar /> */}
              <div className="container">
                <Routes>
                  <Route exact path="/" element={<Home/>} />
                  <Route exact path="/loginUser" element={<Login/>} />
                  <Route exact path="/createUser" element={<Signup/>} />
                </Routes>
              </div>
          </Router>
        </Provider>
      </MuiThemeProvider>
    );
  }
}

export default App;

登录.js

class Login extends Component {
    constructor(){
        super();
        this.state = {
            email: '',
            password: '',
            errors: {}
        }
    }

    handleSubmit = (event) => {
        event.preventDefault();
        const userData = {
            email: this.state.email,
            password: this.state.password
        }
        
        axios
        .post("/loginUser", userData)
        .then(res => {
            console.log(res.data);
            localStorage.setItem('FBIdToken', `Bearer ${res.data.token}`);
            this.props.history.push('/')
        })
        .catch((err) => {
            console.log("ERROR inside loginUser.js");
        })
    }
    // Combine handleEmailChange and handlePasswordChange
    handleEmailChange = (event) => {
        this.setState({
            email: event.target.value
        })
    }
    handlePasswordChange = (event) => {
        this.setState({
            password: event.target.value
        })
    }

    render() {
        const { classes } = this.props;
        return (
            <Grid container className={classes.form}>
                <Grid item sm/>
                <Grid item sm>
                    <img src={HeroLogo} alt="CompanyLogo" className={classes.logo}/>
                    <Typography variant="h2" className={classes.pageTitle}>
                        Login
                    </Typography>
                    {/* Do we need to validate the email?? */}
                    <form noValidate onSubmit={this.handleSubmit}>
                        <FormControl margin="normal" variant="outlined" sx={{width:'50ch'}}>
                            <InputLabel htmlFor="email">Email</InputLabel>
                            <OutlinedInput
                                id="email"
                                type="email"
                                value={this.state.email}
                                className={classes.textField}
                                onChange={this.handleEmailChange}
                                label="Email"
                            />
                        </FormControl>
                        <br/>
                        <FormControl margin="normal" variant="outlined" sx={{width:'25ch'}}>
                            <InputLabel htmlFor="password">Password</InputLabel>
                            <OutlinedInput
                                id="password"
                                type="password"
                                value={this.state.password}
                                className={classes.textField}
                                onChange={this.handlePasswordChange}
                                label="Password"
                            />
                        </FormControl>
                        <br/>
                        <Button 
                            type="submit"
                            variant="contained"
                            color="primary"
                            className={classes.button}
                        >
                            LOGIN
                        </Button>
                        <br/>
                        <small>Don't have an account? <Link to="/createUser">Sign up</Link></small>
                    </form>
                </Grid>
                <Grid item sm/>
            </Grid>
        )
    }
}

package.json

{
  "name": "derms-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.1.1",
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://north*******************************cloudfunctions.net/api"
}

Answer 1

我很惊讶你没有看到任何错误，原因如下:

1. react-router-dom v6 不再公开用于导航的 history 对象。它被替换为返回 navigate 函数的 useNavigate Hook 。
2. react-router-dom v6 Route 组件也不再传递任何路由属性(即 history、location 和 match)，它们就是不存在。换句话说，this.props.history 是未定义的，在尝试调用 push 函数时应该抛出错误。

由于 Login 是一个类组件，您需要创建自己的自定义 withRouter 组件来获取 navigate 函数并将其传递给登录作为 Prop 。

const withRouter = Component => props => {
  const navigate = useNavigate();
  return (
    <Component {...props} navigate={navigate} />
  );
};

...

class Login extends Component {
  constructor(){
    super();
    this.state = {
        email: '',
        password: '',
        errors: {}
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const userData = {
      email: this.state.email,
      password: this.state.password
    }
    
    axios
    .post("/loginUser", userData)
    .then(res => {
      console.log(res.data);
      localStorage.setItem('FBIdToken', `Bearer ${res.data.token}`);
      this.props.navigate('/');
    })
    .catch((err) => {
      console.log("ERROR inside loginUser.js");
    })
  }

  ...

  render() {
    ...
    return (
      ...
    )
  }
}

export default withRouter(Login);