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

【问题标题】：Redirect To Route within Function React Router Dom重定向到函数 React Router Dom 中的路由
【发布时间】：2019-03-14 14:42:09
【问题描述】：

一旦用户成功登录，我有一个带有单击事件的按钮，该按钮调用一个使 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 解决这个问题。任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案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);

【讨论】：

【解决方案2】：

您可以在 render 方法中有条件地返回它，例如

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

如果您没有通过身份验证，则返回您的登录 ui

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

【讨论】：

【解决方案3】：

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

请查看本教程了解更多详情 react auth tutorial click here

【讨论】：