你应该知道的react router 4
Posted 一江西流
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了你应该知道的react router 4相关的知识,希望对你有一定的参考价值。
上一篇我们说到了路由组件的嵌套。想必你已经运用自如了。那么,这一次我们来聊一聊4.X中Router的变更。
在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可。
例如,
import { Router, Route, hashHistory} from "react-router"
import routes from "./routes"
<Router history={hashHistory} routes={routes}>
<Route path="/" component={App}/>
</Router>
在4.X中提供几种不同的路由组件来替代history属性的作用,分别是
<BrowserRouter>
import { BrowserRouter } from ‘react-router-dom‘ <BrowserRouter basename={optionalString} forceRefresh={optionalBool} getUserConfirmation={optionalFunc} keyLength={optionalNumber} > <App/> </BrowserRouter>
<HashRouter>
import { HashRouter } from ‘react-router-dom‘ <HashRouter> <App/> </HashRouter>
<MemoryRouter> 一般用于测试或者无浏览器的环境中,像是react native中
<MemoryRouter
initialEntries={[ ‘/one‘, ‘/two‘, { pathname: ‘/three‘ } ]}
initialIndex={1}
>
<App/>
</MemoryRouter>
<StaticRouter> 一般用于服务端,永远不会改变location
<StaticRouter location={req.url} context={context}> <App/> </StaticRouter>
需要注意的是,router组件只能有一个子元素
以上是关于你应该知道的react router 4的主要内容,如果未能解决你的问题,请参考以下文章
react-routerreact-router-domreact-router-native 关系
使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由
Antd Menu组件应该如何结合react-router Link组件?