react-router 从 v2/v3 to v4 迁移(翻译)
原文地址 react-router v4 是完全重写的,所以没有简单的迁移方式,这份指南将为您提供一些步骤,以帮助您了解如何升级应用程序。 注意: 这份迁移指南适用于react-router v2和v3,但为简洁起见,对以前版本的引用仅提及v3。
The Router在react-router v3中,仅有一个 此外,您可以使用 // 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 组件都会为您创造出一个 在v4中,没有集中的路由配置。任何需要根据路由渲染内容的地方,您只需渲染一个 // 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, /// in v3 the element <Route path='contact' component={Contact} /> // 相当于 { path: 'contact',component: Contact } 使用 v4,您可以像常规的 React 程序一样布局您应用中的组件,您要根据位置(特别是其 在 v4, 路由嵌套在 v3 中, <Route path='parent' component={Parent}> <Route path='child' component={Child} /> <Route path='other' component={Other} /> </Route> 当嵌套的 <Parent {...routeProps}> <Child {...routeProps} /> </Parent> 使用 v4,子 <Route path='parent' component={Parent} /> const Parent = () => ( <div> <Route path='child' component={Child} /> <Route path='other' component={Other} /> </div> )
|