深入理解React Router

引言

   从后端开发转到前端开发，对React Router的概念及使用一直有点困惑，因此决定写篇文章，梳理一下。

React Router的简介

   React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗来说，它通过管理URL，实现组件的切换和状态的变化，从而帮助我们的程序在不同的URL下展示不同的内容。

React Router的版本更新

• github 上React router 的版本更新： https://github.com/ReactTraining/react-router/tags

   可以看到从2014年至今，React router 已经从V0版本更新到了 V5 版本。其实可以分为两个大版本，3.x及之前是个大的版本，4.x之后又是一个大的版本。两个大版本之间不仅API完全不同，考虑路由的方式也完全不同。
   从v4.0.0版本开始，React Router也像 React 家族中的其他成员一样， 做了核心库和绑定库分离，具体为：

• react-router 核心库（官方API文档）
• react-router-dom 用于绑定web端（官方API文档）
• react-router-native 用于绑定React Native（官方API文档）
• react-router-redux 用于集成Redux（githup地址）
• react-router-config 用于配置静态路由（githup地址）

   而V5版本与4.x完全向后兼容，值得关注的是在v5.1.0版本增加了基于 React Hooks 的一些 API，有useParams、useLocation、useHistory和useRouteMatch，让我们可以在组件中不接受 route props 就可以拿到路由信息 { match, location, location }，除了利用了 React Hooks，React router 中还有其他充分展示了 React 特性的 API，比如 利用了 render props，withRouter 利用了高阶组件。

React Router的使用

   React router 只是一个核心库，具体使用时要根据不同的应用场景选择不同的绑定库，比如：如果在web应用程序中使用 React router，就安装 react-router-dom 库，如果在 React Native 中使用 React router ，就应该安装 react-router-native 库。

一、重点讲解react-router-dom

1. 主要成分

React Router中的组件主要分为三类：

• 路由器，例如BrowserRouter和HashRouter
• 路经匹配器，例如Route和Switch
• 导航，例如Link、NavLink和Redirect

（1）路由器
   每个React Router应用程序的核心应该是路由器组件。对于Web项目，react-router-dom提供BrowserRouter和HashRouter路由器，两者之间的主要区别在于它们存储URL和与Web服务器通信的方式不同。
   BrowserRouter使用常规的URL路径。这些URL通常比较直观，但是要求正确配置服务器。具体来说，您的Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。其中一种方式是可以在nginx服务器上配置重定向，重定向到相同页面。
   HashRouter将当前位置存储在URL的hash一部分中，因此URL看起来像http://example.com/#/your/page。由于哈希不发送到服务器，所以不需要特殊的服务器配置。
   使用路由器，只需确保将其呈现在元素层次结构的根目录下即可。通常会将顶级App元素包装在路由器中，如下所示：

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")
);

未完待续。。。。。