在成功登录后更新视图时出现问题。
URL更改,但页面保持空白。当我手动重新加载页面或手动输入URL时,页面内容正确显示。
我已经读过某处,这是redux中的一个常见问题,但从未找到适当的解决方案。
也许有人可以帮我这个忙。
Route.js
import React,{Component} from 'react';
import {BrowserRouter, Route,Switch,} from 'react-router-dom';
import { connect } from 'react-redux';
import Login from '../containers/Login';
import DashBoard from '../containers/Dashboard';
import {PrivateRoute } from '../components/PrivateRoute';
class Routes extends Component {
render() {
return(
<BrowserRouter history={history}>
<Switch>
<PrivateRoute exact path='/' component={DashBoard} />
<Route path="/login" component={Login}/>
</Switch>
</BrowserRouter>
)
}
}
function mapStateToProps(state) {
return {
auth_datail: state.authontications,
}
}
export default connect(mapStateToProps)(Routes)
PrivateRoute.js
import React from 'react';
import { Route, Redirect,withRouter } from 'react-router-dom';
export const PrivateRoute = ({ component: Component,...rest }) => (
<Route {...rest} render={props => (
sessionStorage.getItem('token')
? <Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import {createStore,applyMiddleware} from 'redux'
import reduxThunk from 'redux-thunk';
import reducers from './reducers'
import Routes from './route/Routes'
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
ReactDOM.render(
<Provider store={ createStoreWithMiddleware(reducers)}>
<Routes/>
</Provider>,
document.getElementById('root')
);