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

在上一篇 【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