React的路由系統(tǒng)

有過(guò)React開發(fā)經(jīng)驗(yàn)的同學(xué)肯定都用過(guò)React Router越锈，這是用來(lái)告訴React在什么路由狀態(tài)下需要渲染什么組件舰绘，我們一起看下v5版本的React Router的路由使用（當(dāng)前最新v6會(huì)有差異）：

       <Switch>          <Route exact path="/">            <Home />          </Route>          <Route path="/about">            <About />          </Route>          <Route path="/dashboard">            <Dashboard />          </Route>          <Route path="*">            <NoMatch />          </Route>        </Switch>

根據(jù)上述配置就可以在三種不同的URL匹配下渲染不同組件叁征，并且最末尾的*可以用來(lái)匹配所有其余預(yù)期之外的URL因妇，即404頁(yè)面躺翻，看起來(lái)也還是蠻清晰易懂的等舔。

Next.js路由系統(tǒng)

不知道大家有沒有聽過(guò)約定優(yōu)于配置這個(gè)編程概念，很多設(shè)計(jì)不好的框架常需要非常多的配置翁巍，每個(gè)配置都有額外的學(xué)習(xí)成本和犯錯(cuò)的可能性驴一，配置越多的系統(tǒng)給人感覺就越是復(fù)雜難用。
Next.js的路由系統(tǒng)就是一個(gè)典型的約定優(yōu)于配置的例子曙咽，直接使用目錄和文件的名稱充當(dāng)路由中的匹配規(guī)則蛔趴，讓我們不需要學(xué)習(xí)React Router中一系列的路由相關(guān)的API，這是一個(gè)非常直覺化的設(shè)計(jì)思路例朱，只需要了解少量目錄和文件名與路由映射關(guān)系就可以完全不操心配置同步修改的麻煩孝情，我們一起了解下如下幾個(gè)典型的路由場(chǎng)景是怎么在Next.js中實(shí)現(xiàn)的：

1) www.demo.com

此處有兩個(gè)知識(shí)點(diǎn)：

2) www.demo.com/users

由上面所提到知識(shí)可知，渲染該路由的就是/pages/users/index.tsx文件

3) www.demo.com/users/001

上述路由中的001是用戶ID渔隶，也就是說(shuō)該參數(shù)是動(dòng)態(tài)的羔挡，也就不可能給每個(gè)用戶創(chuàng)建一個(gè)對(duì)應(yīng)文件，比如/pages/users/001.tsx间唉，這種動(dòng)態(tài)路由參數(shù)的場(chǎng)景在Next.js中使用一種特殊的文件名格式[xxx]绞灼，所以，我們使用/pages/users/[id].tsx這種文件名告訴Next.js呈野，我們此處需要接收一個(gè)動(dòng)態(tài)的參數(shù)id低矮，所以，凡是路由規(guī)則符合www.demo.com/users/xxx的格式都會(huì)被/pages/users/[id].tsx渲染被冒，同時(shí)军掂，在渲染過(guò)程我們肯定也需要拿到對(duì)應(yīng)的用戶ID進(jìn)行數(shù)據(jù)加載，獲取方式如下：

import { useRouter } from "next/router";import { useEffect } from "react";export default function UsersPage() {  const router = useRouter();  const id = router.query.id;  // 此處拿到id就可以進(jìn)行數(shù)據(jù)獲取了  useEffect(() => {    // 此處基于id獲取數(shù)據(jù)進(jìn)行渲染  }, [id]);}

4) www.demo.com/orders/2023/01/01

此處我們需要先獲取年月日三個(gè)數(shù)值昨悼，再對(duì)訂單進(jìn)行篩選后顯示蝗锥，很明顯這三個(gè)參數(shù)都是動(dòng)態(tài)參數(shù)，首先想到的是使用/pages/orders/[year]/[month]/[day]/index.tsx這種文件結(jié)構(gòu)率触，然后在代碼中使用query對(duì)象的三個(gè)字段來(lái)分別獲取年月日：

import { useRouter } from "next/router";export default function FilteredOrders() {  const router = useRouter();  const { year, month, day } = router.query;  return (    <div>      {year}/{month}/{day}    </div>  );}

當(dāng)然這種方法是OK的终议，也是可以正常渲染拿到結(jié)果，但如果說(shuō)我們的年月日的參數(shù)個(gè)數(shù)可變葱蝗，比如有時(shí)只會(huì)篩選年月痊剖，有時(shí)還會(huì)增加時(shí)分秒篩選，這種相對(duì)復(fù)雜的場(chǎng)景下垒玲，上面這種路由格式就不夠靈活處理不來(lái)。好在Next.js有給到一種文件名格式是[...xxx]用來(lái)接收長(zhǎng)度不定的動(dòng)態(tài)參數(shù)找颓，所以我們可以使用/pages/orders/[...dates].tsx來(lái)

import { useRouter } from "next/router";export default function FilteredOrders() {  const router = useRouter();  return (    <div>      {router.query.dates        ? `${router.query.dates[0]}/${router.query.dates[1]}/${router.query.dates[2]}`        : ``}    </div>  );}

5) 404頁(yè)面

對(duì)于這種特殊狀態(tài)碼頁(yè)面合愈，直接在/pages根據(jù)狀態(tài)碼作為文件名創(chuàng)建對(duì)應(yīng)文件即可，比如/pages/404.tsx

小結(jié)

使用Next.js可以擺脫 React路由配置的一堆事情，直接使用文件夾和文件的名稱來(lái)映射配置關(guān)系佛析，這可以大為減少路由配置同步這一心智負(fù)擔(dān)益老，Next.js這一套文件名映射路由涉及到的知識(shí)點(diǎn)少、學(xué)習(xí)成本低寸莫，是非常優(yōu)秀的設(shè)計(jì)捺萌。當(dāng)然，對(duì)配置簡(jiǎn)化的同時(shí)也必然減少了靈活性膘茎，React Router學(xué)習(xí)成本高但也為用戶帶來(lái)高度可定制功能桃纯，有得有失。