专用路线不会更新视图,但会在手动刷新时更新

时间:2019-07-03 12:37:40

标签: react-redux

在成功登录后更新视图时出现问题。

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')
);

0 个答案:

没有答案