[ Day 20 ] 路由管理 - React Router 1/2

在网页开发技术蓬勃发展的现今，SPA （ Single Page Application ）单页式应用已经逐渐地取代过往从远端服务器载入多笔不同页面的 MPA （ Multiple Page Application ）了。

但若要使用 SPA 的概念来做开发的话，势必就需要一个可以控管不同页面要渲染哪些内容的一个工具了。没错！那个工具就是前端路由！而在 React.js 中的路由管理则是采用了 React Router 这个套件来帮助我们完成这个任务。

备注：如果对於 SPA 的概念不太清楚的话可以参考 Huli 大大的这篇文章：跟着小明一起搞懂技术名词：MVC、SPA 与 SSR 。

React Router

一个应用在 React.js 中并且管理元件所对应的路由管理套件。

虽然 React Router 并不是由 Facebook 官方团队所开发出来的套件，不过目前在使用 React.js 的开发者们大部分都是使用这个套件来作为专案的路由管理。

不过在搜集文章和资料的时候却发现一件事，虽然我们在标题上称呼该套件为 React Router 而且在官网甚至是 GitHub Repository 中的名称都是 React Router ，但是文件中提到该套件的下载时却是要输入下面的指令：

/* 透过 npm 下载 */
npm install react-router-dom

为什麽 react-router 後面会多了一个 dom 呢？

React Router 和 React Router Dom

看了 React Router 的 GitHub Repository 中的 README.md 後发现，除了 React Router Dom 之外还有一个 React Router Native ，原来 React Router Dom 和 React Router Native 都是基於 React Router 这个 Library 所建立而成的。所以 React Router 等同於是所有 React 生态圈所共有的一个路由管理的核心功能，并再将这个核心概念应用在不同需求的套件上。

所以透过上面的说明我们可以知道，只要在专案安装下载 react-router-dom 这个套件就可以实作 React Router 的功能了。

下面就来看 React Router 该怎麽加入到我们的专案中？

使用 React Router

先透过上面的 npm 安装指令下载 react-router-dom 至 React.js 专案中，并在 App.js 档案中加入以下的程序码来引入元件：

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

其实除了上面几个元件之外， React Router 中最主要的三个元件类别有分为三大类：

1. Routers： 例如 <BrowserRouter> 和 <HashRouter>。
2. Route Matchers： 例如 <Route> 和 <Switch>。
3. Navigation ： 例如 <Link> 、 <NavLink> 和 <Redirect> 。

下面我们就为大家介绍这些类别内的元件分别有什麽样的功能？

备注： Route Matchers 和 Navigation 这两个类别的内容会在下一篇的文章介绍，届时再提供传送门给大家喔（传送门来了）！

Routers

采用了 HTML5 的 History API ，包含了 <BrowserRouter> 和 <HashRouter> 两个 Routes ，且透过该 Routes 所包覆的元件都能够使用 React Router 的功能。

不过这两个 Routes 有什麽的区别呢？

<BrowserRouter> ：使用一般的 URL 路径名称，在路径中不会有 # 这个 Hashtag 产生。但是每次点击都会发送一次 Request 请求。

<HashRouter> ：在路径中会多了 /#/ ，顾名思义叫做 HashRouter 。当被点击时并不会发送 Request 请求，所以在这个模式下不需要在意後端的设定。

这边给大家看一下官网提供的范例程序码：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

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

我们在 index.js 档案中汇入 <BrowserRouter> 之後，便可以让 <App /> 中的所有元件使用 React Router 的功能了。

这篇只介绍到了 Routes 的部分，剩下两个类别的元件就留到明天再为大家介绍罗～
写到这边慢慢也进入到了 React.js 额外会使用到的常用套件，因此少了官方文件的说明和范例後也花了相对较多的时间去研究套件的使用和功能等。

那如果有任何问题还是非常欢迎提出和指教唷～
我们下篇见ʘ‿ʘ

参考资料：

• React Router Primary Components
• React-router-dom | 原理解析
• 【React.js入门 - 27】 我要更多更多的分页 - react-router-dom (上)