All About React Router 4

发表于 | 分类于

原文：

All About React Router 4

示例代码

React Router 4 带来新的API以及新的心智模型

Inclusive Routing 引入路由

1
2
3
4
5
6
7
8
9
10
11
12
 const PrimaryLayout = () => (
  <div className="primary-layout">
    <header>
      Our React Router 4 App
      <Route path="/users" component={UsersMenu} />
    </header>
    <main>
      <Route path="/" exact component={HomePage} />
      <Route path="/users" component={UsersPage} />
    </main>
  </div>
)

UsersMenu 和 UsersPage 可以通过同一个路由被渲染到当前页面中，

exact 精确匹配路由 '/'

Switch 路由组

当你需要将路由匹配到一个路由组时，使用 Switch 可以匹配到唯一路由

1
2
3
4
5
6
7
8
9
10
11
12
13
const PrimaryLayout = () => (
  <div className="primary-layout">
    <PrimaryHeader />
    <main>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/users/add" component={UserAddPage} />
        <Route path="/users" component={UsersPage} />
        <Redirect to="/" />
      </Switch>
    </main>
  </div>
)

当使用 Switch 时，只有一个路由会被渲染。

我们仍然需要使用 exact 当设 HomePage 为首选被渲染的组件。否则等浏览到 /users 或则会使 ‘/users/add’ 时，HomePage 组件仍然会被渲染，如果发生同时渲染，那么先渲染的组件排在最前面。

当路由匹配 /users/add 时，也会同时匹配到 /users 路由，为确保优先渲染UserAddPage 可以将这个组件写到 UsersPage 前面，如果相反，则调换顺序。
当然也可以将所有路由设置为 exact 精确匹配，这样就不存在先后问题。

Redirect 重定向

当 Switch 没有匹配到任意一个路由的时候，将会发生路由重定向。

“Index Routes” and “Not Found” （已移除）

在 V4 中不在使用 <IndexRoute>, 而是使用 <Route exact> 精确匹配路由。

如果没有路由被匹配，可以使用 <Switch> 和 <Redirect> 去重定向到默认路由，或者重定向到 404页面

Nested Layouts 嵌套布局

这里展示两种不同的写法，以及为什么第二种是更好的写法

第一种采用 exact 精确匹配路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const PrimaryLayout = props => {
  return (
    <div className="primary-layout">
      <PrimaryHeader />
      <main>
        <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/users" exact component={BrowseUsersPage} />
          <Route path="/users/:userId" component={UserProfilePage} />
          <Route path="/products" exact component={BrowseProductsPage} />
          <Route path="/products/:productId" component={ProductProfilePage} />
          <Redirect to="/" />
        </Switch>
      </main>
    </div>
  )
}

这种写法在技术上是可行的，但是问题在于，props.match 是通过 <Route> 组件传递的。组件 BrowseUsersPage 的子组件并不是通过 <Route> 嵌套路路由中，子组件是不能直接拿到 props.match的。

当然这里可以通过高阶组件的方式将子组件包装：withRouter()

第二种写法在第一种写法的基础上做了修改，通过路由嵌套的方式布局组件，并且不再需要使用 exact 精确匹配路由，也不必使用 withRouter() 加工组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const PrimaryLayout = () => (
    <div className="primary-layout">
        <PrimaryHeader />
        <main>
            <Switch>
                <Route path="/" exact component={HomePage} />
                <Route path="/users" component={UserSubLayout} />
                <Route path="/products" component={ProductSubLayout} />
                <Redirect to="/" />
            </Switch>
        </main>
    </div>
);

const UserSubLayout = () => (
    <div className="user-sub-layout">
        <aside>
            <UserNav />
        </aside>
        <div className="primary-content">
            <Switch>
                <Route path="/users" exact component={BrowseUsersPage} />
                <Route path="/users/:userId" component={UserProfilePage} />
            </Switch>
        </div>
    </div>
);

const UserSubLayout = props => (
    <div className="user-sub-layout">
        <aside>
            <UserNav />
        </aside>
        <div className="primary-content">
            <Switch>
                <Route
                    path={props.match.path}
                    exact
                    component={BrowseUsersPage}
                />
                <Route
                    path={`${props.match.path}/:userId`}
                    component={UserProfilePage}
                />
            </Switch>
        </div>
    </div>
);

Match 匹配对象

Match 对象提供了一下几种属性

  • params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
  • isExact - (boolean) true if the entire URL was matched (no trailing characters)
  • path - (string) The path pattern used to match. Useful for building nested s
  • url - (string) The matched portion of the URL. Useful for building nested s

match.path vs match.url

当路由不携带参数是两者的输出是相同的字符串，尝试打印这两者。

当路由匹配到例如 /users/5 时，match.url 将会输出 “/users/5” ; 而 match.path 输出 “/users/:userId”.

Avoiding Match Collisions 避免匹配冲突

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const UserSubLayout = ({ match }) => (
  <div className="user-sub-layout">
    <aside>
      <UserNav />
    </aside>
    <div className="primary-content">
      <Switch>
        <Route exact path={props.match.path} component={BrowseUsersPage} />
        <Route path={`${match.path}/add`} component={AddUserPage} />
        <Route path={`${match.path}/:userId/edit`} component={EditUserPage} />
        <Route path={`${match.path}/:userId`} component={UserProfilePage} />
      </Switch>
    </div>
  </div>
)

path-to-regexp 用于校验路由参数

1
2
3
4
5
6
7
8
var re = pathToRegexp('/:foo(\\d+)')
// keys = [{ name: 'foo', ... }]

re.exec('/123')
//=> ['/123', '123']

re.exec('/abc')
//=> null

Authorized Route 路由认证、权限管理

根据用户登录状态管理其浏览路由的权限是应用中很常见的功能

with the help of v4 docs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Switch>
            <Route path="/auth" component={UnauthorizedLayout} />
            <AuthorizedRoute path="/app" component={PrimaryLayout} />
          </Switch>
        </BrowserRouter>
      </Provider>
    )
  }
}

可以结合 react redux设计权限管理功能，<AuthorizedRoute> 组件先检测当前的登录状态，
如果是正在登录，则显示 Loading…

如果已经登录则，则跳转到到 <PrimaryLayout> 组件中

如果未登录，则跳转到登录页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class AuthorizedRoute extends React.Component {
  componentWillMount() {
    getLoggedUser()
  }

  render() {
    const { component: Component, pending, logged, ...rest } = this.props
    return (
      <Route {...rest} render={props => {
        if (pending) return <div>Loading...</div>
        return logged
          ? <Component {...this.props} />
          : <Redirect to="/auth/login" />
      }} />
    )
  }
}

const stateToProps = ({ loggedUserState }) => ({
  pending: loggedUserState.pending,
  logged: loggedUserState.logged
})

export default connect(stateToProps)(AuthorizedRoute)

Other mentions 其他

<Link> vs <NavLink>

这两个功能一样，都是路由跳转，但是NavLink有一个属性用来显示跳转选中的样式，activeStyle属性，写显示高亮样式的，接收一个对象{}

在我们路由导航有一个to属性

to属性是我们路由的要跳转的路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react'
import { NavLink } from 'react-router-dom'

const PrimaryHeader = () => (
  <header className="primary-header">
    <h1>Welcome to our app!</h1>
    <nav>
      <NavLink to="/app" exact activeClassName="active">Home</NavLink>
      <NavLink to="/app/users" activeClassName="active">Users</NavLink>
      <NavLink to="/app/products" activeClassName="active">Products</NavLink>
    </nav>
  </header>
)

export default PrimaryHeader

Dynamic Routes 动态路由

在 V4中最好的一部分改变是可以在所有地方包含 <Route> ， 它只是一个 React 组件。

路由将不再是神奇的东西，我们可以用在任何地方，试想一下，当满足条件时，整个路由都可以被路由到。

在这些条件不满足时，我们可以移除那些路由，甚至，可以嵌套路由。

React Router 4 变得更好用是因为这只是一个 Just Components™。