更加好地援助,v4如何使用history调整路由跳转详

时间:2020-01-31 16:49来源:亚洲城ca88唯一官方网站
时间: 2019-03-26阅读: 706标签: 路由 react-router v4什么样行使history调控路由跳转详细明白, 前言 距离React Router v4正式宣告也早已挺久了,前一周把三个React的派头做了晋级,以前的路由用的

时间: 2019-03-26阅读: 706标签: 路由

react-router v4什么样行使history调控路由跳转详细明白,

前言

距离React Router v4 正式宣告也早已挺久了,前一周把三个React的派头做了晋级,以前的路由用的如故v2.7.0版的,所以决定把路由也升格下,恰好“尝尝鲜”...

红尘传达,最近法定同一时候保证 2.x 和 4.x 四个本子。(ヾ(。ꏿ﹏ꏿState of Qatarノ゙咦,此刻相信机智如作者的您也会意识,ReactRouter v3 去哪个地方了?整丢了??巴拉出锅了???敢不敢给自身个圆满的解说!?)事实上 3.x 版本对照于 2.x 并未引进任何新的特色,只是将 2.x 版本中有的放弃 API 的 warning 移除掉而已。遵照设计,未有历史包袱的新品类想要使用稳固版的 ReactRouter 时,应该利用 ReactRouter 3.x。方今 3.x 版本也还地处 beta 阶段,可是会先于 4.x 版本正式揭橥。借使您已经在运用 2.x 的版本,那么进级3.x 将不会有别的附加的代码变动。

问题

当咱们接受react-router v3的时候,我们想跳转路线,大家日常这样管理

就像下边那样

import browserHistory from 'react-router';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
 .then(response => {
 browserHistory.push('/cart'); //这里
 });
}

but!! 难题来了,在react-router v4中,不提供browserHistory等的导出~~

那怎么办?作者怎样决定路由跳转呢???

消灭方法

1. 使用 withRouter

withRouter高阶组件,提供了history令你利用~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
 ...
 myFunction() {
 this.props.history.push("/some/Path");
 }
 ...
}
export default withRouter(MyComponent);

那是法定推荐做法哦。可是这种方法用起来有个别不爽,举个例子我们想在redux里面使用路由的时候,我们只可以在组件把history传递过去。。

就像是难题章节的代码这种情景使用,大家就非得从组件中传多个history参数过去。。。

2. 使用 Context

react-router v4 在 Router 组件中通过Contex暴光了二个router对象~

在子组件中应用Context,我们能够获得router对象,如上面例子~

import React from "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
 static contextTypes = {
 router: PropTypes.object
 }
 constructor(props, context) {
 super(props, context);
 }
 ...
 myFunction() {
 this.context.router.history.push("/some/Path");
 }
 ...
}

自然,这种艺术慎用~尽量不用。因为react不推荐使用contex哦。在现在版本中有望被撤消哦。

3. hack

实质上解析难点所在,就是v3中把大家传递给Router组件的history又展表露来,让我们调用了~~

而react-router v4 的零器件BrowserRouter自个儿成立了history,况兼不暴暴光来,不让大家援引了。狼狈~

大家能够不使用推荐的BrowserRouter,依然利用Router组件。我们友好成立history,别的地点调用自个儿创办的history。看代码~

我们温馨创建一个history

// src/history.js
import createHistory from 'history/createBrowserHistory';
export default createHistory();

咱俩应用Router组件

// src/index.js
import { Router, Link, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
 <Provider store={store}>
 <Router history={history}>
  ...
 </Router>
 </Provider>,
 document.getElementById('root'),
);

此外地方我们即可这么用了

import history from './history';
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
  .then(response => {
  history.push('/cart'); //这里
  });
}

4. 自身非要用BrowserRouter

的确,react-router v4引入使用BrowserRouter组件,而在第多个减轻方案中,我们抛开了这些组件,又回降使用了Router组件。

如何做。 你去看看BrowserRouter的源码,笔者感到您就茅塞顿开了。

源码特简单,没什么东西。我们一同自身写二个BrowserRouter组件,然后替换第三种缓和方法中的Router组件。嘿嘿。

讲到这里也甘休了,小编本人眼下在应用第三种办法,尽管合法推荐第风流倜傥种,作者感到用着相比较麻烦唉。~

总结

以上正是那篇文章的全体内容了,希望本文的剧情对我们的上学大概干活富有一定的参谋学习价值,就算有疑点大家能够留言沟通,感谢大家对帮客之家的扶持。

v4什么样使用history调整路由跳转详细解释, 前言 间隔React Router v4 正式发表也早就挺久了,下周把叁个React的派头做了进级,早先的路由...

时隔 2 年,React的证明式路由组件 React Router 发布了第 5 个本子。

关于 React Router v5 有一个小片头曲,其实开拓团队原来只是安排公布React Router 4.4 版本,但出于错误地动用了托字符 (^卡塔尔(قطر‎ —— 将依赖错误地写成"react-router": "^4.3.1",引致报错。最终团队说了算收回 4.4 版本,直接改为公布React Router v5。

react-router-dom 对 react-router 的本子信任被写为 ^4.3.1,由此当 react-router 更新为 4.4 时用户依然大概会援引 4.3.x 的版本,而它们并不宽容。所以 react-router 开采组决定间接进级主版本为 5,以覆盖 ^ 的功用。

此版本侧重于安乐和包容性,带给了生龙活虎多级修改与新特点,况且完全向后包容4.x。成效和改正很明朗,但是还未破坏性别变化化,所以只要已经在采用 4.x 版本,则可以在不改换代码的处境下间接动用 v5 本子。

$ npm install react-router# or$ npm install react-router-dom# or$ npm install react-router-native

v5 中最关键的修改是对 = 15 版本的React 完全协作,并对 React 16 提供了更加好的扶持。

提拔了 React 的 context API;毁灭了具备StrictMode 警示;对捆绑基本功构造实行了干净反省,并对宣布的具有绑定包实行了完美测量试验。

还为临蓐引进了预优化的 build,能够不用在创设脚本中手动将 process.env.NODE_ENV 设置为“临蓐”,更器重的是不会将路由器营造为 build 的生龙活虎部分,团队曾经在支付和生育形式中拍卖了那些标题。

导入方式也为此供给改动:

// Instead of:import Router from 'react-router/Router';import Switch from 'react-router/Switch';// do:import { Router, Switch } from 'react-router';

时下依旧支撑前意气风发种风格,但会时有发生警报。

除此以外,v5 简化并自动化了公布进程,从几天前开班能够更频繁、更可预测地公布。

新特色方面,此版本的八个入眼新职能是能够在 Route path 中央银行使数组,简化了操作:

// Instead of this:Switch Route path="/users/:id" component={User} / Route path="/profile/:id" component={User} //Switch// you can now do this:Route path={["/users/:id", "/profile/:id"]} component={User} /

还带动了一些 bug 修复,富含辅助 Link innerRef 中的 React.createRef,并补助在 Route component 中利用 React.forwardRef。

端详查看公布公告。

转自:开源中夏族民共和国地址:-router-5-released?from=20一九零五24

编辑:亚洲城ca88唯一官方网站 本文来源:更加好地援助,v4如何使用history调整路由跳转详

关键词: 亚洲城ca88