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

您可以通过 render 方法（如

）有条件地返回它

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

，如果未通过身份验证，则返回登录ui

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

重定向到功能React Router Dom中的路由

3 个答案: