首页 > 代码库 > react-router-dom v4
react-router-dom v4
一、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>被渲染在与前一个相同的位置。
react-router-dom v4