React Router怎么使用

Router和Route

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

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

每一條<Route>就是一條路由，其中包括當(dāng)前路徑和映射的URL。<Router>類似一個(gè)容器，里邊包裹著一條條的路由。

服務(wù)端路由

服務(wù)器端會接受到客戶端的http請求，根據(jù)請求中的URL，找到響應(yīng)的映射函數(shù)，然后執(zhí)行該函數(shù)，向返回的值發(fā)送給客戶端。

在Express中如下：

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

客戶端路由

在客戶端，路由的映射函數(shù)通常是進(jìn)行一些DOM的顯示和隱藏操作。目前前端的實(shí)現(xiàn)方式有兩種，「Hash模式和History模式」。

• Hash模式。在url中的     #及后邊的部分是hash，向服務(wù)端發(fā)送請求的時(shí)候，hash部分不會發(fā)送出去。
• History模式。主要使用     history.pushState和     history.replaceState改變URL。

兩種方法的比較：

• Hash模式只更改     #后的內(nèi)容，History可以通過API設(shè)置任意的同源URL；
• History模式可以通過API添加任意類型的數(shù)據(jù)到歷史記錄中，Hash模式只能更改字符串；
• Hash兼容性更好，History更加正式；
• Hash無需后端配置，History需要配置     index.html用于匹配不到資源的時(shí)候（返回index)頁面。

動態(tài)路由

上邊所以說的都是靜態(tài)路由，除此之外還有動態(tài)路由。比如，當(dāng)我們登陸github時(shí)，url是https://www.github.com/Bzsheng。人家肯定不可能為每個(gè)用戶創(chuàng)建一條路由，這時(shí)候就是創(chuàng)建一條動態(tài)的路由，形如/:id來實(shí)現(xiàn)的，當(dāng)我登陸的時(shí)候，將參數(shù)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>