栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

React-router:如何手动调用链接?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

React-router:如何手动调用链接?

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/636468.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号