以编程方式导航使用反应路由器

我正在开发一个应用程序，我检查用户是否没有loggedin我必须显示登录表单，否则发送一个动作，将改变路线和加载其他组件。这里是我的代码：

  render() { if (isLoggedIn) { // dispatch an action to change the route } // return login component <Login /> } 

我怎么能做到这一点，因为我不能改变渲染功能的状态。

Answer 1

考虑到你正在使用react-router v4

与withRouter一起使用你的组件，并使用withRouter history.push改变路由。 只有当你的组件没有收到Router道具时，你才需要使用withRouter ，当你的组件是一个由路由器渲染的组件的嵌套子withRouter ，并且你没有通过路由器道具的时候，该组件根本不链接到路由器，并且作为路由的单独组件呈现。

 import {withRouter} from 'react-router'; class App extends React.Component { ... render() { if (isLoggedIn) { // dispatch an action to change the route this.props.history.push('/home'); } // return login component return <Login /> } } export default withRouter(App); 

重要的提示

如果使用withRouter来防止更新被shouldComponentUpdate阻塞，那么withRouter包装实现shouldComponentUpdate的组件是非常重要的。 例如，使用Redux时：

/ /这绕过shouldComponentUpdate

 withRouter(connect(...)(MyComponent)) 

//这不是

 connect(...)(withRouter(MyComponent)) 

使用react-router v2 or react-router v3 ，您可以利用context来动态更改路由

 class App extends React.Component { ... render() { if (isLoggedIn) { // dispatch an action to change the route this.context.router.push('/home'); } // return login component return <Login /> } } App.contextTypes = { router: React.PropTypes.object.isRequired } export default App; 

或使用

 import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); 

Answer 2

在反应路由器版本4中：

 import React from 'react' import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom' const Example = () => ( if (isLoggedIn) { <OtherComponent /> } else { <Router> <Redirect push to="/login" /> <Route path="/login" component={Login}/> </Router> } ) const Login = () => ( <h1>Form Components</h1> ... ) export default Example;