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

Question

I wrote a reducer and a action for authentication in redux, and check if user logged in with:

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

it works, and i can check user auth in redner with:

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

After login get logged in in browser console. How can i redirect to / ?

I try many way like:

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

Browser url changed but page content doesn't change.

Update: My App.js routes:

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

Update2: my template:

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

Answer 1

In render method

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

I guess you have to import the below.

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

Is this what you are looking for?

Answer 2

make your routes like this

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

and then in your Login component's render method

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

Answer 3

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

read more about exact

tend to put your root route first inside <Switch> and for the last one you can have a route that will render in 404 cases.

from one of my projects

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