重定向到函数 React Router Dom 中的路由 [英] Redirect To Route within Function React Router Dom

问题描述

我有一个带有单击事件的按钮，该按钮调用一个函数，该函数使用户成功登录后通过 API 登录.我想将用户重定向到 /overview.我不完全确定如何使用 react-router-dom，我所看到的一切都是使用 react-router 并使用 Class Based Component 而不是像我使用的 基于函数的组件.

以下是我的路线设置方式

从react"导入React；import { BrowserRouter as Router, Route } from 'react-router-dom';从../../login/Login"导入登录；从../../main/Main"导入主；const App = () =>{返回 (<div className="应用程序"><路由器><div className="应用程序容器"><路由路径={"/login"} 组件={() =><登录/>}/><路由精确路径={"/overview"} component={Main}/>

</路由器>

);}导出默认应用程序；

这是我的 LoginCard 组件(内部登录组件)，带有按钮和 api 调用函数

从'react'导入React；import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';从'../button/Button'导入按钮；从'../../api/LoginService'导入登录服务；const LoginCard = (props) =>{const loginService = new LoginService();const handleLogin = () =>{loginService.login(电子邮件，密码).then((响应) => {//想重定向到这里?});}返回 (<div className="登录"><Button onClick={handleLogin}>登录</Button>

);};导出默认登录卡；

这是我尝试过的，但通过查看其他线程没有奏效

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

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

尝试添加

import createBrowserHistory from "history/createBrowserHistory";const 历史 = createBrowserHistory();<路由器历史={历史}>

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

所以不确定如何做到这一点?我宁愿只使用 react-router-dom 或通过 Function Based Component 来解决这个问题.任何帮助将不胜感激.

解决方案

由于 LoginCard 是 Login 的子组件，因此无法访问 route props 自动.您可以将 Route 更改为以下内容，并将 history 属性从 Login 传递给 LoginCard:

或者你可以使用withRouterHOC 将 route props 注入到 LoginCard 组件中.

const LoginCard = props =>{const loginService = new LoginService();const handleLogin = () =>{loginService.login(email, password).then(response => {props.history.push("/overview");});};返回 (<div className="登录"><Button onClick={handleLogin}>登录</Button>

);};导出默认 withRouter(LoginCard);

I have a button with a click event that calls a function that makes an API to login a user, once a user has been successfully logged in. I want to redirect the user to /overview. I'm not entirely sure how to do it with react-router-dom, everything I have seen has been with react-router and using a Class Based Component and not a Function Based Component like I am using.

Below is how my Routes are setup

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;

Here is my LoginCard Component (Inside Login Component) with the button and function with the api call

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;

Here is what I have tried but hasn't worked from looking at other threads

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

I also saw people mention props.location or this.props.location both are undefined for me.

Tried to add

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

in App.js and the use history.push But got an error saying it was not a function.

So not really sure how to do this? I'd rather only solve this with react-router-dom or via a Function Based Component. Any help would be greatly appreciated.

解决方案

Since LoginCard is a child component of Login it will not get access to the route props automatically. You can either change your Route to the following, and pass down the history prop from Login to LoginCard:

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

Or you can use the withRouter HOC to inject the route props into the LoginCard component.

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);

这篇关于重定向到函数 React Router Dom 中的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！