React Router v4教程：为你的 React 应用建立路由

翻译：疯狂的技术宅
原文： https://www.edureka.co/blog/r...

---

本文首发微信公众号：前端先锋
欢迎关注，天天都给你推送新鲜的前端技术文章

---

在这篇关于 React Router 的博文中，我将引导你搞懂 React 中路由的概念。

你将看到如下主题：

• 常规路由
• 为何须要 React 路由？
• React 中的路由
• React Router v4 的优势

常规路由

一般，当用户在浏览器中键入 URL 时，会向服务器发送 HTTP 请求，而后服务器检索 HTML 页面。对于每一个新URL，用户会被重定向到新的 HTML 页面。你能够经过参考下图来更好地理解路由的工做原理。

为何须要 React 路由？

将单页应用限制为单一视图并不适用于 Facebook、Instagram 等流行的社交媒体网站，这些网站如今使用 React 呈现多个视图。咱们须要继续前进，学习如何在单页面应用中显示多个视图。

例如咱们习惯看到显示欢迎消息和相关内容的主页。网站介绍的详细信息能够在“关于咱们”页面上找到，用户列表及其详细信息会出如今不一样的页面上，可能还有其余各类页面包含不少不一样的视图。

那么你认为这是怎样实现的呢？ 在程序中添加路由器能够解决这一需求。

React 中的路由

这将把咱们带到本文的主题：React Router v4。 2017年3月13日，Micheal Jackson 和 Ryan Florence 发布了React Router v4 及可靠的文档。

他们相信“Learn Once, Route Anywhere”的理念。

在 React Conf 2017 的演讲中，他们经过展现如何将路由概念无缝地从 Web 平台投射到 Native 平台，以及将 React Router 集成到 VR 并在 React Native 中建立动画来解释这一点。虽然他们的谈话中的着眼点是围绕路由器 API 是如何“All About Components”的。

在React中，只涉及单个 “Html” 文件。每当用户输入新的 URL 请求时，路由不会从服务器获取数据，而是为每一个新的 URL 请求交换不一样的 Component。用户看上去是在多个页面之间进行切换，但实际上，根据咱们的须要实现了多个视图，每一个单独的组件被从新渲染。

React 是如何实现这一目标的？

这就是'History'的概念出如今图片中的地方。在 React 中，路由查看每一个组件的历史记录，当历史记录发生任何变化时，组件会从新渲染。在 Router v4 以前，咱们必须手动设置 History 的值。可是，从Router v4开始，<BrowserRouter>绕过了基本路径，为咱们减小了大量的工做。若是你仍然须要访问历史记录，HTML5 提供了一个内置的 API，容许咱们经过 pushState 和 replaceState 方法修改 History 对象。

实际上，React Router 4 彻底重写了以前的版本。建立本身的路由只是你已经精通的 React Components 后的天然扩展。虽然学习它须要花费一些时间，可是一旦你继续前进，Router v4 将变得更有意义。

React Router v4 的优势

本质上咱们是想在 React 的 render 方法中调用 Router Component。这是由于整个 Router API 都是关于组件的。固然，每一个 Component 的角色都是像全部 React 应用同样呈现UI。

1. 无需手动设置历史记录

咱们只需将本身的 Router App Component 包装在 <BrowserRouter> 中。

ReactDOM.render((
  <BrowserRouter>
      <App/>
  </BrowserRouter>
), document.getElementById(“root”));

如今让咱们经过一个例子来理解路由：

咱们将建立三个页面。这是页面列表及其对应的地址。

Page	Address
Home	‘/’
About	‘/about’
Topic	‘/topic’

2. 包拆分：

react-router 库如今被分为三个独立的包。

• react-router-dom：专为 Web 应用而设计。
• react-router-native：专为移动应用而设计。
• react-router-core：能够用于核心应用的任何地方。

咱们须要安装依赖项：

$ npm install --save react-router-dom

（若是你没有安装最新的npm（5.x）版本，请使用 save 命令。）

从 react-router-dom 库中导入 BrowserRouter 以及 Link 和 Route。

能够将 BrowserRouter 可视化为呈现子路径的根组件。

import {
  BrowserRouter,
  Route,
  Link
} from 'react-router-dom'

接下来让咱们了解 Link 和 Route 组件，而后再继续了解 Router v4 的优点。

Link

Link 用于在程序中的内部路由之间导航。它至关于锚标签：<a> </a>。

Link 传递一个字符串参数 to，其中指定了 URL 的路径。

<ul>
  <li><Link to="/">Home</Link></li>
  <li><Link to="/about">About</Link></li>
  <li><Link to="/topics">Topics</Link></li>
</ul>

Route

如今看一下 <Route>，它能够被视为负责从新渲染 UI 的单一子组件。若是用户指定的位置与 <Route> 中定义的路径匹配，则 <Route> 能够经过两种方式定义视图：

1. 建立 <Route> 中指定的 Component
2. 使用内联 render 函数

若是指定的URL与定义的路径不匹配，<Route> 将返回 null。 <Route> 有两个参数，一个用于路径，另外一个用于渲染 UI。

<BrowserRouter>
  <div>
    <Route exact path="/" render={ ( ) => (<h2> HomePage </h2>) } />
    <Route path="/about" component={About}/>
    <Route path="/topics" component={Topics}/>
  </div>
</BrowserRouter>

3. 用 exact 取代 IndexRoute：

无需使用 IndexRoute 呈现 HomePage，你会注意到前面代码片断中的 exact 属性。这是 React Router v4 声明 性质的一个的例子。

v4 中的路由为 inclusive 意味着能够同时呈现多个路由。咱们使用 exact 属性来解决多匹配中的问题。

在前面的例子中没有使用 exact，URL '/' 将匹配路径 '/'、'/about' 和 '/topics'。可是咱们但愿 '/' 仅匹配咱们的渲染函数，所以使用 exact 明确地实现了这一点。

4. 路由只能有一个单一子元素：

这就是咱们须要在 <div> 中包装路由的缘由。若是不这样作，你会获得如下异常。

Uncaught Error: A <Router> may have only one child element

5. Switch：

虽然咱们能够在一个 <div> 标签中封装几个路由。若是咱们但愿一次只渲染一个路径组件，可使用 <switch> 标签。它按顺序检查每一个路径的匹配并在找到第一个匹配后中止。

<switch>
  <route exact path=’/’   component={Home}/>
  <route path=’/users/:id’ component={User }/>
  <route path=’/users’   component={Roster}/>
<switch>

在示例中，咱们将路径 /users/:id 放置在 /users 前面。这是由于 users/:id 将匹配 /users 和 /users/:id。

如今你已经对 React Router 有了基本的了解，下面是定义咱们的 Router App Component 的完整代码。

const App= () => (
  <BrowserRouter>
    <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/topics">Topics</Link></li>
    </ul>
    <Route exact path="/" render={ ( ) => (<h2> HomePage </h2>) } />
    <Route path="/about" component={About}/>
    <Route path="/topics" component={Topics}/>
    </div>
  </BrowserRouter>
)

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

---

欢迎继续阅读本专栏其它高赞文章：

• 12个使人惊叹的CSS实验项目
• 必需要会的 50 个React 面试题
• 世界顶级公司的前端面试都问些什么
• 11 个最好的 JavaScript 动态效果库
• CSS Flexbox 可视化手册
• 从设计者的角度看 React
• 过节很无聊？仍是用 JavaScript 写一个脑力小游戏吧！
• CSS粘性定位是怎样工做的
• 一步步教你用HTML5 SVG实现动画效果
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现