我希望我的应用重定向到/ 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);