React Router简介

• Installation

  安装

• Types of routes

  路线类型

• Components

  组件

• BrowserRouter

  浏览器路由器

• Link

  链接

• Route

  路线

• Match multiple paths

  匹配多个路径

• Inline rendering

  内联渲染

• Match dynamic route parameter

  匹配动态路由参数

This tutorial introduces React Router 4, the last stable version

本教程介绍了React Router 4，最后一个稳定版本

React Router is the de-facto React routing library, and it’s one of the most popular projects built on top of React.

React Router是事实上的React路由库，它是在React之上构建的最受欢迎的项目之一。

React at its core is a very simple library, and it does not dictate anything about routing.

React的核心是一个非常简单的库，它对路由没有任何要求。

Routing in a Single Page Application is the way to introduce some features to navigating the app through links, which are expected in normal web applications:

在单页应用程序中进行路由是引入一些功能以通过链接导航应用程序的方法，这是普通Web应用程序所期望的 ：

1. The browser should change the URL when you navigate to a different screen

   导航到其他屏幕时，浏览器应更改URL

2. Deep linking should work: if you point the browser to a URL, the application should reconstruct the same view that was presented when the URL was generated.

   深层链接应该起作用：如果将浏览器指向URL，则应用程序应重建生成URL时显示的视图。

3. The browser back (and forward) button should work like expected.

   浏览器的后退(和前进)按钮应该可以正常工作。

Routing links together your application navigation with the navigation features offered by the browser: the address bar and the navigation buttons.

路由将您的应用程序导航与浏览器提供的导航功能链接在一起 ： 地址栏和导航按钮 。

React Router offers a way to write your code so that it will show certain components of your app only if the route matches what you define.

React Router提供了一种编写代码的方法，以便仅当路由与您定义的内容匹配时 ， 它才会显示应用程序的某些组件 。

安装 (Installation)

With npm:

使用npm ：

npm install react-router-dom

路线类型 (Types of routes)

React Router provides two different kind of routes:

React Router提供两种不同的路由：

• BrowserRouter

  BrowserRouter

• HashRouter

  HashRouter

One builds classic URLs, the other builds URLs with the hash:

一个构建经典URL，另一个构建带有哈希的URL：

https://application.com/dashboard   /* BrowserRouter */
https://application.com/#/dashboard /* HashRouter    */

Which one to use is mainly dictated by the browsers you need to support. BrowserRouter uses the History API, which is relatively recent, and not supported in IE9 and below. If you don’t have to worry about older browsers, it’s the recommended choice.

使用哪种浏览器主要取决于您需要支持的浏览器。 BrowserRouter使用的History API相对较新，在IE9及以下版本中不受支持。 如果您不必担心较旧的浏览器，那么这是推荐的选择。

组件 (Components)

The 3 components you will interact the most when working with React Router are:

与React Router一起使用时，您互动最多的3个组件是：

• BrowserRouter, usually aliased as Router

  BrowserRouter ，通常别名为Router

• Link

  Link

• Route

  Route

BrowserRouter wraps all your Route components.

BrowserRouter包装所有Route组件。

Link components are - as you can imagine - used to generate links to your routes

Link组件-您可以想象-用于生成到您的路线的链接

Route components are responsible for showing - or hiding - the components they contain.

Route组件负责显示或隐藏它们所包含的组件。

浏览器路由器 (BrowserRouter)

Here’s a simple example of the BrowserRouter component. You import it from react-router-dom, and you use it to wrap all your app:

这是BrowserRouter组件的简单示例。 您从react-router-dom导入它，并用它包装所有应用程序：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <Router>
      <div>
        <!-- -->
      </div>
  </Router>,
  document.getElementById('app')
)

A BrowserRouter component can only have one child element, so we wrap all we’re going to add in a div element.

一个BrowserRouter组件只能有一个子元素，因此我们将所有要添加的内容包装在div元素中。

链接 (Link)

The Link component is used to trigger new routes. You import it from react-router-dom, and you can add the Link components to point at different routes, with the to attribute:

链接组件用于触发新路由。 您可以从react-router-dom导入它，并可以使用to属性添加Link组件以指向不同的路由：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'

ReactDOM.render(
  <Router>
      <div>
        <aside>
          <Link to={`/dashboard`}>Dashboard</Link>
          <Link to={`/about`}>About</Link>
        </aside>
        <!-- -->
      </div>
  </Router>,
  document.getElementById('app')
)

路线 (Route)

Now let’s add the Route component in the above snippet to make things actually work as we want:

现在，让我们在上面的代码片段中添加Route组件，以使事情按需要实际工作：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    ...
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
    ...
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to={`/`}>Dashboard</Link>
        <Link to={`/about`}>About</Link>
      </aside>

      <main>
        <Route exact path='/' component={Dashboard} />
        <Route path='/about' component={About} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

Check this example on Glitch: https://glitch.com/edit/#!/flaviocopes-react-router-v4/

在Glitch上检查以下示例： https ://glitch.com/edit/#! / flaviocopes-react-router-v4 /

When the route matches /, the application shows the Dashboard component.

当路由匹配/ ，应用程序将显示仪表板组件。

When the route is changed by clicking the “About” link to /about, the Dashboard component is removed and the About component is inserted in the DOM.

通过单击指向/about的“关于”链接更改路线时，将删除仪表板组件，并将关于组件插入DOM。

Notice the exact attribute. Without this, path="/" would also match /about, since / is contained in the route.

注意exact属性。 没有这个， path="/"也将匹配/about ，因为/包含在路由中。

匹配多个路径 (Match multiple paths)

You can have a route respond to multiple paths using a regex, because path can be a regular expressions string:

您可以使用正则表达式使路由响应多个路径，因为path可以是正则表达式字符串：

<Route path='/(about|who)/' component={Dashboard} />

内联渲染 (Inline rendering)

Instead of specifying a component property on Route, you can set a render prop:

您可以设置render道具，而不是在Route上指定component属性：

<Route
  path='/(about|who)/'
  render={() => (
    <div>
      <h2>About</h2>
      ...
    </div>
  )}
/>

匹配动态路由参数 (Match dynamic route parameter)

You already saw how to use static routes like

您已经了解了如何使用静态路由，例如

const Posts = () => (
  <div>
    <h2>Posts</h2>
    ...
  </div>
)

//...

<Route exact path="/posts" component={Posts} />

Here’s how to handle dynamic routes:

这是处理动态路线的方法：

const Post = ({match}) => (
  <div>
    <h2>Post #{match.params.id}</h2>
    ...
  </div>
)

//...

<Route exact path="/post/:id" component={Post} />

In your Route component you can lookup the dynamic parameters in match.params.

在Route组件中，您可以在match.params查找动态参数。

match is also available in inline rendered routes, and this is especially useful in this case, because we can use the id parameter to lookup the post data in our data source before rendering Post:

match联渲染的路由中也可以使用match ，这在这种情况下特别有用，因为在渲染Post之前，我们可以使用id参数在数据源中查找发布数据：

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]

const Post = ({post}) => (
  <div>
    <h2>{post.title}</h2>
    {post.content}
  </div>
)

//...

<Route exact path="/post/:id" render={({match}) => (
  <Post post={posts.find(p => p.id === match.params.id)} />
)} />

翻译自: https://flaviocopes.com/react-router/