更改Redux状态不会更改React Router中的路由

时间:2020-07-12 12:05:57

标签: javascript reactjs redux react-redux react-router

我希望我的应用重定向到/ login并在未登录用户和登录时呈现AuthenticationPage重定向到/ dashboard。我的Redux状态“已记录”正在正常运行,我可以在redux devtools中看到它,当我单击登录按钮时,它会将值更改为true,但路由器不会更改/ dashboard的路径,而是始终/login。

import React, {useEffect} from 'react';
import AuthenticationPage from './AuthenticationPage';
import '../styles/App.css';
import Dashboard from './Dashboard';
import {TOGGLE_LOGIN} from "../redux/actionTypes"
import {connect} from 'react-redux'
import {BrowserRouter as Router, Switch, Route, Redirect} from "react-router-dom";

function App(props) {

  useEffect(()=>{
    if(window.localStorage.getItem('isLogged')==="true"){
      props.toggleLogin();
    }
  },[])

  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/">
            {props.isLogged ? <Redirect to = "/dashboard"/> : <Redirect to = "/login"/>}
          </Route> 
          <Route path = "/dashboard">
            <Dashboard/>
          </Route>
          <Route path = "/login">
            <AuthenticationPage/>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

const mapStateToProps = state => {
  const { isLogged } = state.LogInReducer;
  return {
    isLogged
  };
}

const mapDispatchToProps = dispatch=>{
  return{
    toggleLogin: ()=>dispatch({type: TOGGLE_LOGIN})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

0 个答案:

没有答案