重定向到函数 React Router 中的路由 Dom

Question

我有一个带有单击事件的按钮，该按钮调用一个函数，该函数使 API 来登录用户，一旦用户成功登录。我想将用户重定向到 /overview.我不完全确定如何用 react-router-dom 做到这一点，我所看到的一切都是用 react-router 和 Class Based Component 而不是我正在使用的 Function Based Component。

以下是我的路线设置方式

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from "../../login/Login";
import Main from "../../main/Main";

const App = () => {

   return (
      <div className="App">
         <Router>
            <div className="App-container">
               <Route path={"/login"} component={() => <Login />} />
               <Route exact path={"/overview"} component={Main} />
            </div>
         </Router>
      </div>
   );

}

export default App;

这是我的 LoginCard 组件（内部登录组件），带有 api 调用的按钮和功能

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import Button from '../button/Button';
import LoginService from '../../api/LoginService';

const LoginCard = (props) => {

   const loginService = new LoginService();

   const handleLogin = () => {
      loginService.login(email, password)
         .then((response) => {
            // Want to redirect here?
         });
   }

   return (
      <div className="Login">
         <Button onClick={handleLogin}>Login</Button>
      </div>
   );
};

export default LoginCard;

这是我已经尝试过但在查看其他线程时没有奏效的方法

<Redirect to="/overview"/> <Redirect to={{ pathname: '/overview' }} />

我还看到有人提到 props.location 或 this.props.location 对我来说都是未定义的。

尝试添加

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();
<Router history={history}>

在App.js中的使用 history.push 但是得到一个错误，说它不是一个函数。

所以不太确定该怎么做？我宁愿只用 react-router-dom 或 Function Based Component 来解决这个问题。任何帮助将不胜感激。

Answer 1

因为 LoginCard 是 Login 的子组件，所以它不会自动访问 route props。您可以将 Route 更改为以下内容，并将 history 道具从 Login 传递到 LoginCard:

<Route path="/login" component={Login} />

或者您可以使用 withRouter HOC 将 route props 注入 LoginCard 组件。

const LoginCard = props => {
  const loginService = new LoginService();

  const handleLogin = () => {
    loginService.login(email, password).then(response => {
      props.history.push("/overview");
    });
  };

  return (
    <div className="Login">
      <Button onClick={handleLogin}>Login</Button>
    </div>
  );
};

export default withRouter(LoginCard);

Answer 2

如果您想要登录用户，请同时查看 privateRoute，它可以帮助您保护您的页面

详情请看教程 react auth tutorial click here

Answer 3

您可以 return 在您的 render 方法中有条件地

if(this.state.authenticated){
 return <Redirect to={{ pathname: '/overview' }} />
}

和 return 您的登录 ui 如果没有像您那样进行身份验证

 return (
  <div className="Login">
  <Button onClick={handleLogin}>Login</Button>
  </div>
);

重定向到函数 React Router 中的路由 Dom

Redirect To Route within Function React Router Dom

javascript

reactjs

react-router-dom