React Router怎么使用

面试题中的路由部分

路由最初是出现在后端中，后端根据不同的路由返回不同的页面，后来随着单页面应用（SPA）诞生，前端也出现了路由，实现了不用刷新页面就可以更新页面的效果。 

什么是路由

简单的说，「路由就是URL到函数的映射」。路由的本质是「监听URL的变化，然后匹配路由规则，显示相应的页面。」

Router和Route

在React-Router中，路由使用基本如下所示。

<Router>
  <Route path="/" component={Index} />
  <Route path="/hello" component={Hello}/>
  <Route path="/404" component={Error}/>
  ...
</Router>

每一条<Route>就是一条路由，其中包括当前路径和映射的URL。<Router>类似一个容器，里边包裹着一条条的路由。

服务端路由

服务器端会接受到客户端的http请求，根据请求中的URL，找到响应的映射函数，然后执行该函数，向返回的值发送给客户端。

在Express中如下：

app.get('/', (req, res) => {
  res.sendFile('index')
})

客户端路由

在客户端，路由的映射函数通常是进行一些DOM的显示和隐藏操作。目前前端的实现方式有两种，「Hash模式和History模式」。

• Hash模式。在url中的     #及后边的部分是hash，向服务端发送请求的时候，hash部分不会发送出去。
• History模式。主要使用     history.pushState和     history.replaceState改变URL。

两种方法的比较：

• Hash模式只更改     #后的内容，History可以通过API设置任意的同源URL；
• History模式可以通过API添加任意类型的数据到历史记录中，Hash模式只能更改字符串；
• Hash兼容性更好，History更加正式；
• Hash无需后端配置，History需要配置     index.html用于匹配不到资源的时候（返回index)页面。

动态路由

上边所以说的都是静态路由，除此之外还有动态路由。比如，当我们登陆github时，url是https://www.github.com/Bzsheng。人家肯定不可能为每个用户创建一条路由，这时候就是创建一条动态的路由，形如/:id来实现的，当我登陆的时候，将参数Bzsheng传递过去，从而获取到页面。

Express中：

app.get('/user/:id', (req, res) => {
  ...
})

Next.js中：

// page/posts/[id].js
export function getStaticPaths { ... }
export function getStaticProps({ params }) { ... }

React-Router中：

<Router>
  <Route path="/user/:id" />
</Router>