【React Router】初次認識 React Router: v6 新語法 createBrowserRouter


Posted by Annie-Chien on 2022-12-23

在上一篇 【React Router】初次認識 React Router:基本使用 介紹了 使用 React Router 的前置作業,還記得上次用 <BrowserRouter> 包覆元件在最外層,替我們建構出路由環境嗎?

這次要介紹 React Router v6 推出的全新寫法:createBrowserRouter<BrowserRouter> 還是可以使用,只是官方推薦開發者可以試著換成新寫法,因為新寫法才支援新的 data APIs,若是使用 <BrowserRouter> 則無法使用一些 v6 的新功能。


OK! 我們沿用上一次的範例,嘗試看看用 v6 新語法改寫吧~

1. 創造一個 Browser Router

上一次,我們是直接使用 React Router 提供的 <BrowserRouter> 元件,而這次我們要使用新的 createBrowserRouter 函式來自己創造一個。

  • createBrowserRouter() 傳入一個陣列,陣列內放入 Routes 物件。
  • 你可能注意有個叫做 <RootLayout/> 的元件,這個元件是我們自己創建的,想取什麼名字都可以。因為每一個頁面都會共用部分元件,例如在這個範例當中,每一頁都有 Navbar,因此我們可以另外創造一個 layout 的元件來放置這些每一頁都會共用的東西。

    仔細看看 <RootLayout/> 的架構,會發現我們直接把 <nav>...</nav> 整塊直接複製了過來,但卻多了一個 <Outlet /> 元件。<Outlet /> 元件是 React Router 提供的,可以把它想像是一個給子元件的出口,如果沒有了它,則 React 就不知道要在哪裡渲染 和 。

createRoutesFromElements()
createRoutesFromElements() 是 React Router 提供的一個 helper function。原本我們需要傳入一個陣列物件到 createBrowserRouter() 中,但透過 createRoutesFromElements() 我們就可以維持原本我們在使用 <BrowserRouter> 時的 JSX 寫法。

  • 其中需要特別注意的地方是原本是使用 <Routes><Routes> 來包覆 <Route>,但使用 createRoutesFromElements() 時則要改用 <Route></Route> 來創建巢狀的 route。因為 createRoutesFromElements() 其實在背後已經替我們創造 <Routes> 了。

2. 設定 <RouterProvider>

接下來就要把我們自己創造的 browser router 傳入一個由 React Router 所提供的元件<RouterProvider/>

3. 大功告成!

這樣子就成功使用 createBrowserRouter() 來取代 <BrowserRouter> 的設定啦~
附上更新後的完整程式碼:

import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider
} from "react-router-dom";
//pages
import Home from "./pages/Home";
import About from "./pages/About";
//layouts
import RootLayout from "./layouts/RootLayout";

//================================================//

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
    </Route>
  )
);

export default function App() {
  return <RouterProvider router={router} />;
}

還在努力學習中,如有錯誤請不吝指正🙇🏻‍♀️

🔗 Useful Links
React Router Docs


#React







Related Posts

C# DataGirdView相關應用

C# DataGirdView相關應用

CSS 效能優化

CSS 效能優化

第一章:2 製作買賣訊號

第一章:2 製作買賣訊號


Comments