Question

我在redux中编写了reducer和用于身份验证的操作，并检查用户是否使用以下方式登录：

const mapStateToProps = state => {
    return {
        isLoggedIn: state.auth.token !== null,
    }
}

它可以工作，我可以使用以下方法检查Redner中的用户身份验证：

if (this.props.isLoggedIn) {
    console.log('logged in');
}

登录后，在浏览器控制台中获取logged in。我如何重定向到/？

我尝试了多种方式：

if (this.props.isLoggedIn) {
    this.props.history.push('/');
}

浏览器网址已更改，但页面内容未更改。

更新：我的App.js路线：

  <div className="App">
    <Switch>
      <Route path="/login" exact component={Login} />
      <Route path="/" component={Template} />
    </Switch>
  </div>

Update2：我的模板：

import React, { Component } from 'react';
class Template extends Component {
    render() {
           return (
            <h1>Template</h1>
        )
    }
}
export default Template;

Answer 1

在渲染方法中

if (this.props.isLoggedIn) {
   return <Redirect to='/'/>;
}

我想您必须导入以下内容。

import { Redirect } from 'react-router-dom'

这是您要寻找的吗？

Answer 2

使您的路线像这样

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

，然后在您的Login组件的render方法中

this.props.isLoggedIn ? <Redirect to='/'/> : <div> { /* Login component stuff goes here */ } </div>

Answer 3

<Route exact path="/" component={Template} />

详细了解exact

倾向于将根路由放在<Switch>内，对于最后一个，您可以有一条将在404种情况下呈现的路由。

来自我的一个项目

<BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/auth' component={Auth} />
      <Route path='/dashboard' component={Dahsboard} />
      <Route component={Route404} />
    </Switch>
</BrowserRouter>

使用Redux登录后如何在React Router dom中重定向到首页？

3 个答案: