React Router v4-重定向组件(更新2017/04/15)
v4推荐的方法是允许您的render方法捕获重定向。使用state或props确定是否需要显示重定向组件(然后触发重定向)。
import { Redirect } from 'react-router';// ... your class implementationhandleOnClick = () => { // some action... // then redirect this.setState({redirect: true});}render() { if (this.state.redirect) { return <Redirect push to="/sample" />; } return <button onClick={this.handleOnClick} type="button">Button</button>;}参考:https :
//reacttraining.com/react-
router/web/api/Redirect
React Router v4-参考路由器上下文
您还可以利用
Router暴露给React组件的上下文。
static contextTypes = { router: PropTypes.shape({ history: PropTypes.shape({ push: PropTypes.func.isRequired, replace: PropTypes.func.isRequired }).isRequired, staticContext: PropTypes.object }).isRequired};handleonClick = () => { this.context.router.push('/sample');}这就是
<Redirect />引擎盖下的工作方式。
参考:https :
//github.com/ReactTraining/react-router/blob/master/packages/react-
router/modules/Redirect.js#L46,L60
React Router v4-外部更改历史记录对象
如果仍然需要执行与v2的实现类似的操作,则可以创建的副本,
BrowserRouter然后将暴露
history为可导出常量。以下是一个基本示例,但是您可以根据需要将其组合为可自定义的道具。有一些关于生命周期的警告,但就像在v2中一样,它应始终重新渲染路由器。这对于从动作功能发出API请求后的重定向很有用。
// browser router file...import createHistory from 'history/createBrowserHistory';import { Router } from 'react-router';export const history = createHistory();export default class BrowserRouter extends Component { render() { return <Router history={history} children={this.props.children} /> }}// your main file...import BrowserRouter from './relative/path/to/BrowserRouter';import { render } from 'react-dom';render( <BrowserRouter> <App/> </BrowserRouter>);// some file... where you don't have React instance referencesimport { history } from './relative/path/to/BrowserRouter';history.push('/sample');最新
BrowserRouter扩展:https :
//github.com/ReactTraining/react-router/blob/master/packages/react-router-
dom/modules/BrowserRouter.js
React Router v2
将新状态推送到
browserHistory实例:
import {browserHistory} from 'react-router';// ...browserHistory.push('/sample');参考:https :
//github.com/reactjs/react-
router/blob/master/docs/guides/NavigatingOutsideOfComponents.md



