考慮到你在用react-router v4
將您的組件與withRouter
和使用history.push
從道具到改變路線。你需要利用withRouter
只有當組件沒有接收到Router
如果您的組件是由路由器呈現的組件的嵌套子組件,而您還沒有將路由器支持傳遞給它,或者組件根本沒有鏈接到路由器,并且被呈現為一個獨立于路由的組件,則可能會發生這種情況。
import {withRouter} from 'react-router';class App extends React.Component {
...
componenDidMount() {
// get isLoggedIn from localStorage or API call
if (isLoggedIn) {
// dispatch an action to change the route
this.props.history.push('/home');
}
}
render() {
// return login component
return <Login />
}}export default withRouter(App);
重要注記
如果你用withRouter
若要防止更新被shouldComponentUpdate
,重要的是withRouter
包裝實現shouldComponentUpdate
..例如,在使用Redux時:
/這到處都是shouldComponentUpdate
withRouter(connect(...)(MyComponent))
/這不是
connect(...)(withRouter(MyComponent))
或者你可以用重定向
import {withRouter} from 'react-router';class App extends React.Component {
...
render() {
if(isLoggedIn) {
return <Redirect to="/home"/>
}
// return login component
return <Login />
}}
帶著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');