React-router 路由

Question

Link

为你的应用提供声明式的、可访问的导航链接。

import { Link } from 'react-router-dom';
<Link to="/about">About</Link>

to: string

一个字符串形式的链接地址，通过 pathname、search 和 hash 属性创建。

<Link to='/courses?sort=name' />

to: object

一个对象形式的链接地址，可以具有以下任何属性：

• pathname - 要链接到的路径
• search - 查询参数
• hash - URL 中的 hash，例如 #the-hash
• state - 存储到 location 中的额外状态数据

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

replace: bool

当设置为 true 时，点击链接后将替换历史堆栈中的当前条目，而不是添加新条目。默认为 false。

<Link to="/courses" replace />

innerRef: func

允许访问组件的底层引用。

const refCallback = node => {
  // node 指向最终挂载的 DOM 元素，在卸载时为 null
  // 下面 node 为 <a href="/"></a>
}

<Link to="/" innerRef={refCallback} />

others

你还可以传递一些其它属性，例如 title、id 或 className 等。

<Link to="/" className="nav" title="a title">About</Link>

NavLink

一个特殊版本的 Link，它会在与当前 URL 匹配时为其呈现元素 添加样式属性。

import { NavLink } from 'react-router-dom';

<NavLink to="/about">About</NavLink>

activeClassName: string

当元素处于激活状态时应用的类，默认为 active。它将与 className 属性一起使用。

<NavLink to="/faq" activeClassName="selected">FAQs</NavLink>

activeStyle: object

当元素处于激活状态时应用的样式。

const activeStyle = {
  fontWeight: 'bold',
  color: 'red'
};

<NavLink to="/faq" activeStyle={activeStyle}>FAQs</NavLink>

exact: bool

如果为 true，则只有在位置 完全匹配 时才应用激活类/样式。

<NavLink exact to="/profile">Profile</NavLink>

strict: bool

如果为 true，则在确定位置是否与当前 URL 匹配时，将考虑位置的路径名后面的斜杠。

isActive: func

添加额外逻辑以确定链接是否处于激活状态的函数。

// 只有当事件 id 为奇数时才考虑激活
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>

Redirect

导航到一个新的位置。新的位置将覆盖历史堆栈中的当前条目

import { Route, Redirect } from 'react-router-dom';

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard" />
  ) : (
    <PublicHomePage />
  )
)} />

to: string

要重定向到的 URL

to: object

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: {      //在组件中通过 this.props.location.state 进行访问
    referrer: currentLocation
  }
}} />

push: bool

如果为 true，重定向会将新的位置推入历史记录，而不是替换当前条目。

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

from: string

• 要从中进行重定向的路径名
• 所有匹配的 URL 参数都会提供给 to，必须包含在 to 中用到的所有参数，to 未使用的其它参数将被忽略。
• 只能在 Switch 组件内使用 Redirect from

// 根据匹配参数进行重定向
Switch
  <Redirect from='/users/:id' to='/users/profile/:id' />
  <Route path='/users/profile/:id' component={Profile} />
</Switch>