[英]How to configure private routes with react router 4
我有以下用于私有路由组件的代码。
import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
class PrivaetRoute extends React.Component {
render() {
const {component: Component, ...rest} = this.props;
return (
<Route
{...rest}
render={props => this.props.loggedIn ? (
<Component {...props}/>
) : (
<Redirect
to={{
pathname: '/',
state: {from: this.props.location},
}}
/>
)}
/>
)
}
}
function mapStateToProps(state) {
return {
loggedIn: state.loggedIn
}
}
export default connect(mapStateToProps)(PrivaetRoute);
我为呈现不同路线的应用程序组件提供了以下代码
import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Reboot from 'material-ui/Reboot';
/**
* Local
* */
import IndexPage from '../pages/Index';
import DashboardPage from '../pages/Dashboard';
import PrivateRoute from '../containers/PrivateRoutes';
export default class App extends React.Component {
render() {
return (
<div>
<BrowserRouter>
<div>
<Reboot/>
<Switch>
<Route exact path="/" component={IndexPage}/>
<PrivateRoute path="/dashboard" component={DashboardPage}/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
}
我设计登录系统的方式是,当身份验证完成时,我的redux操作会将loginIn状态更改为true。 我已经使用chrome开发人员工具检查过, loggedIn
状态确实设置为loggedIn:true
; 但是,当我将url更改为/dashboard
所有状态都会刷新(甚至是redux状态),然后重定向到/
。 我究竟做错了什么?
**编辑redux容器
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 {composeWithDevTools} from 'redux-devtools-extension';
import App from './components/App';
import reducers from './reducers';
const store = createStore(reducers, {}, composeWithDevTools(applyMiddleware(reduxThunk)));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#root')
);
你可以在这里阅读。
因为Redux用作全局状态容器,所以这意味着无论您进入哪个页面,状态都不会被重置。
只需记住一件事,Redux应该是React-Router的父级。
所以应该看起来像这样
<Provider>
<Router>
<YourApp/>
</Router>
</Provider>
仅供参考: Provider
是Redux的状态容器。
如果将<Router>
作为<Provider>
的父级,则将再次面临相同的问题。
希望能帮助到你。
这与路由设置完全无关。
我使用的是combineReducers
函数,但我没有意识到它会将所有状态都包装到一个父对象中,因此我必须在访问要访问的实际对象之前访问其键。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.