react-router-dom v4中的 <Switch>用法

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

      精准匹配。

  7.  strict

    表示是否匹配pathname部分末尾的“/”符号,如果有此参数,Redirect组件的from和浏览器pathname匹配时要考虑末尾的”/”。如,from=”/dd/” 必须匹配 http://127.0.0.1:9090/dd/而非 http://127.0.0.1:9090/dd

六、 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) => {

  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是"http://127.0.0.1:8080/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>组件被渲染在与前一个相同的位置。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页