history.push 在反应路由器 4 中
history.push in react router 4
如何使用 React Router 4 有条件地将路由推送到历史记录?我收到错误 'history.push is not a function'.
我不是在寻找重定向,而是在寻找浏览器中的后退按钮也可以使用的东西。
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom';
import Signup from './components/Signup';
import Welcome from './components/Welcome';
class App extends React.Component {
constructor() {
super();
this.state = {
isLoggedIn: false
};
}
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/welcome" component={Welcome}/>
<Route exact path="/" render={() => (
this.state.isLoggedIn ?
history.push('/welcome') : history.push('/signup')
)}/>
<Redirect to="/"/>
</div>
</BrowserRouter>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
重定向组件上有一个选项可以完全按照您的意愿执行。
<Redirect to="/" push />
将进行导航,还会推送到浏览器历史记录
history.push
我总觉得不对:)
如何使用 React Router 4 有条件地将路由推送到历史记录?我收到错误 'history.push is not a function'.
我不是在寻找重定向,而是在寻找浏览器中的后退按钮也可以使用的东西。
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom';
import Signup from './components/Signup';
import Welcome from './components/Welcome';
class App extends React.Component {
constructor() {
super();
this.state = {
isLoggedIn: false
};
}
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/welcome" component={Welcome}/>
<Route exact path="/" render={() => (
this.state.isLoggedIn ?
history.push('/welcome') : history.push('/signup')
)}/>
<Redirect to="/"/>
</div>
</BrowserRouter>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
重定向组件上有一个选项可以完全按照您的意愿执行。
<Redirect to="/" push />
将进行导航,还会推送到浏览器历史记录
history.push
我总觉得不对:)