react-router-dom v4

Posted 2020-09-09 Ricky

一、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>被渲染在与前一个相同的位置。