我稍微调整了React Router示例,让私有路由与Redux一起玩得很好,但在链接或重定向到其他“页面”时没有呈现任何组件。这个例子可以在这里找到:
https://reacttraining.com/react-router/web/example/auth-workflow
他们的PrivateRoute组件如下所示:
const PrivateRoute = ({ component: Component,...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login',state: { from: props.location } }}/> ) )}/> )
但是,因为我已将其合并到Redux应用程序中,所以我不得不稍微调整一下PrivateRoute,以便我可以访问redux存储以及路径Props:
const PrivateRouteComponent = (props) => ( <Route {...props.routeProps} render={() => ( props.logged_in ? ( <div>{props.children}</div> ) : ( <Redirect to={{ pathname: '/login',state: { from: props.location } }} /> ) )} /> ); const mapStateToProps = (state,ownProps) => { return { logged_in: state.auth.logged_in,location: ownProps.path,routeProps: { exact: ownProps.exact,path: ownProps.path } }; }; const PrivateRoute = connect(mapStateToProps,null)(PrivateRouteComponent); export default PrivateRoute
每当我没有登录并点击PrivateRoute时,我都被正确地重定向到/ login。但是,例如登录并使用< Redirect ... />或点击任何< Link ...>对于PrivateRoute,URI会更新,但视图不会更新。它保留在同一个组件上。
我究竟做错了什么?
只是为了完成图片,在应用程序的index.js中有一些不相关的东西,路由设置如下:
ReactDOM.render( <Provider store={store}> <App> <Router> <div> <PrivateRoute exact path="/"><Home /></PrivateRoute> // ... other private routes <Route path="/login" component={Login} /> </div> </Router> </App> </Provider>,document.getElementById('root') );
您需要使用< Switch>包裹您的路线标签
ReactDOM.render( <Provider store={store}> <App> <Router> <div> <Switch> <PrivateRoute exact path="/"><Home /></PrivateRoute> // ... other private routes <Route path="/login" component={Login} /> </Switch> </div> </Router> </App> </Provider>,document.getElementById('root'));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。