React-Router URL 导航控制组件

热度 ℃

React-Router 中定义了3种导航组件用于从一个链接转向另外一个链接，分别是 Link，NavLink，Redirect。还有 Switch 组件用于管理多个子组件，但它在同一时刻只会渲染一个子组件。Prompt 组件用于组件跳转确认。

1
2
import { Link } from 'react-router-dom'
<Link to="/about">关于</Link>

上面定义了一个最简单的 Link 组件，点击该组件，将导航到 /about 页面。

to: string / object

to 表示需要跳转到的路径(pathname)或地址（location)，可以是 string 字符串也可以是表示位置的 object 对象。

1
2
3
4
5
6
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

当使用 object 指定给 to 属性时，该 object 对象需要是一个类 Location 的对象:

  • pathname -（ string 类型）URL路径。
  • search -（ string 类型）URL中的查询字符串（query string）。
  • hash -（ string 类型）URL的 hash 分段。
  • state -（ string 类型）是指 location 中的状态，例如在 push(path, state) 时，state会描述什么时候 location 被放置到堆栈中等信息。这个 state 只会出现在 browser history 和 memory history 的环境里。

replace: bool

当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。当设置为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false。

NavLink 是 Link 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数。

activeClassName: string

当元素匹配上当前 URL 的时候, 为这个元素添加样式名所对应的样式。

activeStyle: object

当元素被选中时, 为此元素添加样式。

1
2
3
4
5
6
7
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

exact: bool

当值为 true 时, 只有当地址完全匹配 class 和 style 才会应用。

strict: bool

当值为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线。[详细信息]
(https://reacttraining.cn/web/api/NavLink/strict-bool)

isActive: func

添加用于确定链接是否活动的额外逻辑的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

上面的代码指定了只有当 eventId 是奇数的时候才被判定是 active。

Redirect

该组件用于重定向到一个指定的地址。Redirect 组件在渲染的时候将会导航到一个新的地址（location）。这个新的地址（location）将会覆盖在访问历史记录里面的原地址，如同服务端的重定向一样。

to: string

重定向目标 URL。

to: object

重定向目标地址(location)。

push: bool

当设置为 true 时，重定向（redirecting）将会把新地址加入访问历史记录里面，而不是替换掉目前的地址。

1
<Redirect push to="/somewhere/else"/>

from: string

需要被重定向的路径（pathname）。当渲染一个包含在 Switch 里面的 Redirect 的时候，这可以用作匹配一个地址（location）。

1
2
3
4
<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

Switch

渲染匹配地址(location)的第一个 Route 或者 Redirect。

它与只使用一堆 Route 有什么不同？

Switch 的独特之处是它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的 Route 都会被渲染。
下面的代码：

1
2
3
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的 URL 是 /about ，那么 About，User 还有 NoMatch 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 Route 组合到应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。

但是，有时我们只想选择一个 Route 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：

1
2
3
4
5
6
7
8
import { Switch, Route } from 'react-router'
<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

现在，如果当前处于 /about, Switch 将开始寻找匹配的 Route。 第二个 Route 将会被匹配， Switch 将停止寻找匹配并渲染 About。如果我们处于 /michael ， User 将被渲染。这对于过渡动画也是起作用的，因为匹配的 Route 在与前一个相同的位置被渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Fade>
  <Switch>
    {/* there will only ever be one child here */}
    {/* 这里只会有一个子节点 */}
    <Route/>
    <Route/>
  </Switch>
</Fade>
<Fade>
  <Route/>
  <Route/>
  {/* there will always be two children here,
      one might render null though, making transitions
      a bit more cumbersome to work out */}
   {/* 这里总是有两个子节点,
      一个可能会渲染为null, 使计算过渡增加了一点麻烦 */}    
</Fade>

children: node

Switch 的所有子节点必须为 Route 或 Redirect 。只有匹配当前地址(location)的第一个子节点才会被渲染。Route 元素使用它们的 path 属性匹配，Redirect 元素使用它们的 from 属性匹配。没有 path 属性的 Route 或者 没有 from 属性的 Redirect 将总是可以匹配当前的地址(location)。

1
2
3
4
5
6
7
8
<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/users" component={Users}/>
  <Redirect from="/accounts" to="/users"/>
  <Route component={NoMatch}/>
</Switch>

Prompt

Prompt 组件用于当用户离开当前页的时候做出提示，当你的应用处在特定状态, 此状态不希望用户离开时(例如填写表格到一半), 你应该使用 Prompt。

1
2
3
4
5
6
import { Prompt } from 'react-router'
<Prompt
  when={formIsHalfFilledOut}
  message="你确定要离开吗？"
/>

message: string

当用户尝试导航离开时，提示用户的消息。

message: func

会与用户试图前往下一个地址（location） 和 action 一起被调用。函返回一个字符串用作向用户提示，或者返回true用作允许过渡。

1
2
3
<Prompt message={location => (
  `你确定你要前往 ${location.pathname} 吗?`
)}/>

when: bool

你可以随时渲染 Prompt ，而不是有条件地在警戒后面渲染它。

  • 当 when={true} 时，禁止导航
  • 当 when={false} 时，允许导航