react-router-dom v4
多层路由嵌套示例：
https://github.com/DudeYouth/react-route-dom-test.git
一、BrowserRouter
说明：使用HTML5历史记录API（pushState，replaceState和popstate事件）的<Router>来保持UI与URL的同步
import { BrowserRouter } from 'react-router-dom' <BrowserRouter basename={optionalString} forceRefresh={optionalBool} getUserConfirmation={optionalFunc} keyLength={optionalNumber} > <App/> </BrowserRouter>
1. basename:string
所有位置的基本URL。 如果您的应用程序是从服务器上的子目录提供的，则需要将其设置为子目录。
2. getUserConfirmation：function
一个用来确认导航功能。默认使用window.confirm。
3. forceRefresh:bool
如果为true，则路由器将在页面导航中使用全页刷新。 您可能只希望在不支持HTML5历史记录API的浏览器中使用此功能。
4. keyLength:number
location.key的长度。 默认为6
5. children:node
要呈现的单个子元素。
二、 HashRouter
说明：使用URL的哈希部分（即window.location.hash）的<路由器>可以保持您的UI与URL同步。注意：哈希历史记录不支持location.key或location.state。 在以前的版本中，我们试图缓和行为，但是有一些边缘案例我们无法解决。 任何需要此行为的代码或插件将无法正常工作。 由于此技术仅用于支持旧版浏览器，因此我们建议您将服务器配置为使用<BrowserHistory>
import { HashRouter } from 'react-router-dom' <HashRouter> <App/> </HashRouter>
1. basename:string(与BrowserRouter相同)
<HashRouter basename="/calendar"/> <Link to="/today"/> // renders <a href="#/calendar/today">
2. getUserConfirmation：function(与BrowserRouter相同)
// this is the default behavior const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message) callback(allowTransition) } <HashRouter getUserConfirmation={getConfirmation}/>
3. hashType:string
用于window.location.hash的编码类型。 可用值为：
“slash” - 创建哈希如＃/和＃/阳光/棒棒糖
“noslash” - 创建哈希如＃和＃阳光/棒棒糖
“hashbang” - 创建“ajax可抓取”（Google不推荐使用）哈希像＃！/和＃！/ sunshine /棒棒糖
默认为“slash”。
4. children:node(与BrowserRouter相同)
三、Link
import { Link } from 'react-router-dom' <Link to="/about">About</Link>
1. to:string
链接到的路径名或位置。
2. to:object
要链接的位置。
3. repalce:bool
如果为真，单击链接将替换历史堆栈中的当前条目，而不是添加新条目。
四、 NavLink
import { NavLink } from 'react-router-dom' <NavLink to="/about">About</NavLink>
1. activeClassName: string
当活动时给出元素的类。 默认给定类是活动的。 这将与className支持相结合。
<NavLink to="/faq" activeClassName="selected" >FAQs</NavLink>
2. activeStyle:object
当元素处于活动状态时应用于元素的样式
3. exact: bool
当为真时，仅当位置匹配完全时才会应用活动类/样式。
4. strict: bool
当为真时，在确定位置是否与当前网址匹配时，将考虑位置路径名上的尾部斜线。 有关详细信息，请参阅<Route strict>文档。
5. isActive: func
添加用于确定链接是否活动的额外逻辑的功能。 如果您想要更多地验证链接的路径名与当前URL的路径名匹配，则应该使用这一点。
五、Redirect
import { Route, Redirect } from 'react-router' <Route exact path="/" render={() => ( loggedIn ? ( <Redirect to="/dashboard"/> ) : ( <PublicHomePage/> ) )}/>
1. to:string
链接到的路径名或位置。
2. to:object
要链接的位置。
3. push:bool
当为true时，重定向会将新条目推入历史记录，而不是替换当前条目
4. from:string
要重定向的路径名。 这可以用于在<Switch>内部渲染<Redirect>时匹配位置。
六、Route
import { BrowserRouter as Router, Route } from 'react-router-dom' <Router> <div> <Route exact path="/" component={Home}/> <Route path="/news" component={NewsFeed}/> </div> </Router>
1. Route props
所有三种渲染方法都将通过相同的三个路由属性
- match
- location
- history
2. component
仅当location匹配时才呈现的React组件。
当用户实际上没有点击时，这在服务器端渲染场景中很有用，因此该位置从未实际更改。 因此，名称：static。 当您只需要插入一个位置并对渲染输出进行断言时，它也可以用于简单的测试。这是一个示例节点服务器，为<Redirect>发送302状态代码，为其他请求发送常规HTML
当您使用组件（而不是下面的渲染）时，路由器使用React.createElement从给定组件创建一个新的React元素。 这意味着如果你提供一个内联函数，你会得到很多不必要的新安装。 对于内联渲染，请使用render prop（下图）。
3. render:function
这允许方便的在线渲染和包装，而不需要上述的不必要的重新安装。不需要使用组件支持为您创建一个新的React元素，所以当位置匹配时，您可以传入一个要调用的函数。 渲染道具接收与构件渲染道具相同的所有路由属性。
4. children:function
有时您需要渲染路径是否匹配该位置。 在这些情况下，您可以使用函数child prop。 它的工作原理就像渲染，除了它被调用是否有一个匹配或者没有。儿童渲染支柱接收与组件和渲染方法所有相同的路线道具，除非路由失败匹配URL，则匹配为null。 这允许您根据路线是否匹配来动态调整您的UI。 在这里，如果路由匹配，我们添加一个激活样式
5. path
没有路径的路由总是匹配。
6. exact: bool
当为真时，仅当位置匹配完全时才会应用活动类/样式。
7. strict: bool
当为真时，在确定位置是否与当前网址匹配时，将考虑位置路径名上的尾部斜线。 有关详细信息，请参阅<Route strict>文档。
六、 StaticRouter
说明：当用户实际上没有点击时，这在服务器端渲染场景中很有用，因此该位置从未实际更改。 因此，名称：static。 当您只需要插入一个位置并对渲染输出进行断言时，它也可以用于简单的测试。这是一个示例节点服务器，为<Redirect>发送302状态代码，为其他请求发送常规HTML
import { createServer } from 'http' import React from 'react' import ReactDOMServer from 'react-dom/server' import { StaticRouter } from 'react-router' createServer((req, res) => { // This context object contains the results of the render const context = {} const html = ReactDOMServer.renderToString( <StaticRouter location={req.url} context={context}> <App/> </StaticRouter> ) // context.url will contain the URL to redirect to if a <Redirect> was used if (context.url) { res.writeHead(302, { Location: context.url }) res.end() } else { res.write(html) res.end() } }).listen(3000)
七、 Switch
说明：渲染与位置匹配的第一个小孩<路线>或<重定向>。这不同于仅使用一堆<路线>，<Switch>是唯一的，因为它独家呈现路线。相反，与位置匹配的每个<路线>都会包含。考虑这个代码
如果URL是/ about，那么<About>，<User>和<NoMatch>将全部渲染，因为它们都与路径匹配。这是通过设计，允许我们以许多方式在我们的应用程序中编写<Route>，例如侧边栏和面包屑，引导选项卡等。但是，我们只想选择一个<Route>来渲染。如果我们在/我们不希望也匹配/：用户（或显示我们的“404”页面）。以下是使用Switch
<Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>
现在，如果我们在/ about，<Switch>将开始寻找匹配的<Route>。 <Route path =“/ about”/>将匹配，<Switch>将停止寻找匹配并呈现<About>。类似地，如果我们在/ michael，那么<User>将呈现。这对于动画转换也是有用的，因为匹配的<Route>被渲染在与前一个相同的位置。
