react-router 从 v2/v3 to v4 迁移(翻译)
react-router v4 是完全重写的,所以没有简单的迁移方式,这份指南将为您提供一些步骤,以帮助您了解如何升级应用程序。
注意: 这份迁移指南适用于react-router v2和v3,但为简洁起见,对以前版本的引用仅提及v3。
- The Router
- Routes
- 路由嵌套
- on* 属性
- Switch
The Router
在react-router v3中,仅有一个<Router>
组件,需要提供 history 对象作为他的属性 (prop)。
此外,您可以使用 routes
作为 <Router>
的属性 (prop) 或者作为 children
的方式来定义程序的路由结构。
// v3
import routes from './routes'
<Router history={browserHistory} routes={routes} /> // or <Router history={browserHistory}> <Route path='/' component={App}> // ... </Route> </Router>
使用 react-router v4,一个最大的改变就是可以有很多不同的 router 组件,每个 router 组件都会为您创造出一个 history
对象,<BrowserRouter>
会创建 brower history,<HashRouter>
会创建 hash history,<MemoryRouter>
会创建 memory history。
在v4中,没有集中的路由配置。任何需要根据路由渲染内容的地方,您只需渲染一个 <Route>
组件。
// v4
<BrowserRouter><div><Route path='/about' component={About} /> <Route path='/contact' component={Contact} /> </div> </BrowserRouter>
有一点需要注意的就是 router 组件只能被赋予一个子元素
// yes
<BrowserRouter><div><Route path='/about' component={About} /> <Route path='/contact' component={Contact} /> </div> </BrowserRouter> // no <BrowserRouter> <Route path='/about' component={About} /> <Route path='/contact' component={Contact} /> </BrowserRouter>
Routes
在 v3,<Route>
并不是一个组件,相反,您程序中所有的<Route>
元素仅用于创建路由配置对象。
/// in v3 the element
<Route path='contact' component={Contact} />
// 相当于
{path: 'contact', component: Contact }
使用 v4,您可以像常规的 React 程序一样布局您应用中的组件,您要根据位置(特别是其 pathname
)呈现内容的任何位置,您将呈现 <Route>
在 v4,<Route>
其实是一个组件,所以无论你在哪里渲染 <Route>
,它里面的内容都会被渲染。当 <Route>
的 path
与当前的路径匹配时,它将会渲染 component
, render
, or children
属性中的内容,当 <Route>
的 path
与当前的路径不匹配时,将会渲染 null
路由嵌套
在 v3 中,<Route>
组件是作为其父 <Route>
组件的 children
嵌套其中的。
<Route path='parent' component={Parent}> <Route path='child' component={Child} /> <Route path='other' component={Other} /> </Route>
当嵌套的 <Route>
匹配时,react 元素将会使用子 <Route>
和 父 <Route>
的 component
属性去构建,子元素将作为父元素的 children
属性。
<Parent {...routeProps}> <Child {...routeProps} /> </Parent>
使用 v4,子 <Route>
应该由父 <Route>
呈现。
<Route path='parent' component={Parent} /> const Parent = () => ( <div> <Route path='child' component={Child} /> <Route path='other' component={Other} /> </div> )
on*
属性
react-router v3 提供 onEnter
, onUpdate
, and onLeave
方法。这些方法本质上是重写(覆盖)了 react 生命周期方法
使用 v4,你将会使用生命周期方法 通过 <Route>
渲染的组件,你可以使用 componentDidMount
或 componentWillMount
代替 onEnter
,你可以使用 componentDidUpdate
或者 componentWillUpdate
(更或者 componentWillReceiveProps
) 代替 onUpdate
,你可以使用 componentWillUnmount
代替 onLeave
。
<Switch>
在v3中,您可以指定一些子路由,并且只会渲染匹配到的第一个。
// v3
<Route path='/' component={App}> <IndexRoute component={Home} /> <Route path='about' component={About} /> <Route path='contact' component={Contact} /> </Route>
v4 通过 <Switch>
组件提供了相似的功能,当 <Switch>
被渲染时,它仅会渲染与当前路径匹配的第一个子 <Route>
。
// v4
const App = () => (<Switch><Route exact path='/' component={Home} /> <Route path='/about' component={About} /> <Route path='/contact' component={Contact} /> </Switch> )
react-router 从 v2/v3 to v4 迁移(翻译)相关推荐
- hitchhiker部署_Hitchhiker的React Router v4指南:无限远的递归路径!
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a "dirty" state and we want t ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- PyTorch 实现经典模型7:YOLO (v1, v2, v3, v4)
YOLO (v1, v2, v3, v4) 网络结构 YOLO v3 网络结构 代码 Ref <机器爱学习>YOLO v1深入理解 <机器爱学习>YOLOv2 / YOLO90 ...
- hitchhiker部署_《 Hitchhiker的React Router v4指南》:路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
- 关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
- 使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
- react router v4 简介
最近使用react router 遇到一个问题:当对某个路由添加参数的时候/list/:app 这列路由,点击这个路由以后再点击其他路由,location地址就追加到后面,问不是replace. /l ...
- 经典卷积神经系列(Inception v1\v2\v3\v4、ResNet、ResNext、DenseNet、SENet)
写在前面:此文只记录了下本人感觉需要注意的地方,不全且不一定准确.详细内容可以参考文中帖的链接,比较好!!! 经典的CNN:Inception v1\v2\v3\v4.Resnet.Resnext.D ...
最新文章
- oracle rodo 查看大小,Checkpoint not complete故障
- springboot解决js前端跨域问题,javascript跨域问题解决
- Aurora 8B/10B、PCIe 2.0、SRIO 2.0三种协议比较
- 元素、属性、标题、段落、文本格式化
- 【Python】安利一个超好用的Pandas数据挖掘分析神器
- operator-sdk安装脚本整理
- real210开发板tslib1.4移植
- 检测高CPU线程定位shell脚本
- webpack配置报错WARNING in DefinePlugin Conflicting values for ‘process.env.NODE_ENV‘
- ssm网上球鞋商城(电子商务系统)ssm购物系统,ssm电子产品销售ssm鞋店销售购物ssm商城源码JSP购物系统
- Linux环境下ATAPI MO的使用方法(转)
- hustoj安装学习(2019)
- 遇到问题--python--BLOB/TEXT column 'code' used in key specification without a key length
- bootstrap 5 表单验证
- 【离散数学】代数系统,半群,独异点(幺半群),群,可交换群(Abel群)之间的关系
- PySpark reduce reduceByKey用法
- OOA/OOD/OOP(了解)
- P2742 【模板】二维凸包 / [USACO5.1]圈奶牛Fencing the Cows
- 2023展望未来的stripe经验之谈
- uniapp实现瀑布流懒加载实现和无限上拉加载更多