⭐任務說明

😸React Router v6 在建立的 Router 的方式有一點不一樣，這次任務將帶大家來練習寫寫看！

簡單介紹

• router 的建立方式如下

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

• 渲染畫面的部份是使用RouterProvider

function Nav() {
  return (
    <div>
      <RouterProvider router={router}></RouterProvider>
    </div>
  );
}

export default Nav;

試試看

這邊會使用 DAY23 所練習的程式碼來改寫

• 先建立 routes，會以陣列的形式放置其內容，一個{..} 代表一個項目
• 裡面的屬性值有很多種，這邊先以 path、element、errorElement、children 為示範
  • path：React 要生成的 URL
  • element：React 要渲染的元件或元素
  • errorElement：當發生不存在的頁面時，要渲染的元件或元素
  • children：設定後代表為子路由，他一樣會有 path、element等屬性
• routes 建立完成後，把 routes 傳入 createBrowserRouter()方法中
• 畫面再使用 <RouterProvider router={router}></RouterProvider> 方式渲染

// Nav.js

import * as React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./HomePage";
import ProductPage from "./ProductPage";

const routes = [
  {
    path: "/",
    element: <HomePage />,
    errorElement: <h1>此頁面不存在R！</h1>
  },
  {
    path: "/productList",
    element: <ProductPage />,
    children: [
      {
        path: "products/:productId"
      }
    ]
  }
  // 繼續建立其他路由
];

const router = createBrowserRouter(routes);

function Nav() {
  return (
    <div>
      <RouterProvider router={router}></RouterProvider>
    </div>
  );
}

export default Nav;

• 最終完整結果：連結

結語

感覺更好懂了？對吧？…下個任務見！