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

28人阅读 评论(0) 收藏 举报
分类:

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

查看评论

react路由提高(Prompt、Redirect、match、Switch)

除了Router、Route、Link这三个react路由的基础搭配使用,还有一些其他的比较重要的组件,比如我们在页面切换时,需要进行一些提示,我们就能使用Prompt组件。1、Prompt组件 它...
  • mapbar_front
  • mapbar_front
  • 2017-05-31 01:01:11
  • 6053

React报警告,warning: React does not recognize the `subTitle` prop on a DOM element.

warning: React does not recognize the `subTitle` prop on a DOM element. If you intentionally want it...
  • qq_38719039
  • qq_38719039
  • 2018-03-29 09:47:23
  • 185

react学习笔记 item5 --- Props

本文介绍了 React 中的 props,通过 props,可以向子组件传递参数,利用getDefaultProps可以设置组件的默认 props;为了保证传递参数类型的准备性,可以借助 PropTy...
  • u014607184
  • u014607184
  • 2016-11-20 16:57:00
  • 2268

react-router4.0学习笔记

react-router4.01. 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。...
  • webfansplz
  • webfansplz
  • 2018-02-07 15:05:15
  • 41

初探 React Router 4.0

React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-04 22:46:08
  • 44576

react学习日志2

react-router4.0
  • rain_tsubasa
  • rain_tsubasa
  • 2017-10-11 16:15:32
  • 138

react router4.0初识

React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循react的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即...
  • u013362969
  • u013362969
  • 2017-07-19 14:18:30
  • 218

React Router v4 版本学习指南

React Router v4 版本学习指南React Router 事实上是React官方的标准路由库。当你在一个多视图的React应用中来回切换,你需要一个路由来管理那些URL。React Rou...
  • shenlei19911210
  • shenlei19911210
  • 2017-11-01 14:06:26
  • 393

Redux 17 - 进阶:和React Router一起使用(Usage with React Router)

原文 http://testudy.cc/tech/2017/04/29/redux-17-advanced-UsageWithReactRouter.html?utm_source=tuico...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-29 08:44:00
  • 1060

react基础

react1.keykey是唯一标识,react作diff算法时会匹配v-dom,比较key来比较元素,列表里面的每一项都应该有一个永久并且唯一的属性2.refs//以前refs可以获得元素,现在是回...
  • qq_31631167
  • qq_31631167
  • 2017-10-27 20:13:47
  • 84
    个人资料
    持之以恒
    等级:
    访问量: 6885
    积分: 1091
    排名: 4万+