#showdev使用React Router創建404頁面

我們已經學習了如何在react路由器中創建動態URL，我們還學習了如何在react路由器中處理查詢參數，並將這些值傳遞給我們之前帖子中的頁面組件。

在這部分中，我們將學習如果沒有與URL匹配的路由，如何顯示404頁面。

您可以在此處找到包含codesandbox的最後一部分和最新的代碼庫

例如，運行應用程序並訪問任何不存在的路由 / 404未找到

目前，您不會看到任何頁面組件呈現。如果沒有與路徑匹配的路由，讓我們處理它並顯示默認頁面。

在反應路由器中實現起來相當簡單。在內部反應路由器組件中，創建沒有路徑定義的路由。並確保將代碼放在所有路由的底部，以便路由器檢查所有路由，如果找不到匹配則回退。

// App.js  ...  常量 NoMatchPage = （） => {   返回 （     <H3>404  - 未找到H3>   ）; };  常量 應用 = （） => {   返回 （     <部分 的className =「APP」>       <路由器>         ...         <鏈接 為=「/用戶」>用戶鏈接>         <鏈接 為=「/搜索Q =反應」>搜索鏈接>         ...         <路線 精確 路徑=「/關於」 成分={AboutPage} />         <路線 精確 路徑=「/搜索」 成分={SearchPage} />         <路線 成分={NoMatchPage} />       路由器>     部分>   ）; };  ... 

訪問任意隨機網址，您會看到一個簡單的404頁面。但是等等，讓我們檢查其他頁面是否正常工作而不會中斷。它不會

檢查 關於 鏈接，您將看到關於和404頁面的渲染。因為第一個路由器匹配確切的路由 /關於 路徑，然後它遍歷到底部並載入404路由，因為此路由沒有定義路徑。

React路由器提供一個名為的組件 開關 在路由得到解決後中斷並且不在其下面載入任何其他路由組件。

它很容易實現。將所有路線包含在裡面 開關 零件。讓我們這樣做，讓404頁面正常工作。

// App.js  ... 進口 { 鏈接， BrowserRouter 如 路由器， 路線， 開關 } 從 '反應路由器-DOM'; ...  常量 應用 = （） => {   返回 （     <部分 的className =「APP」>       <路由器>         ...         <開關>           <路線 精確 路徑=「/」 成分={IndexPage} />           ...           <路線 精確 路徑=「/搜索」 成分={SearchPage} />           <路線 成分={NoMatchPage} />         開關>       路由器>     部分>   ）; };  ...  

這個 開關 組件將檢查匹配的路由，如果路由已匹配，則會中斷檢查下一個路由。通過這種方式，我們將避免為所有頁面渲染404路由。

這就是人們，希望你學會了使用反應路由器creating為你的反應應用程序創建404頁面的技巧

您可以在此處查看此系列的代碼庫以及此部分的代碼

保持聯繫

如果您喜歡這篇文章，可以在Twitter上找到我的更新，公告和新聞。 ?