React Router v6 ルート設定

先ず、component作成する。

基本設定

ComponentA.tsx

function ComponentA() {
    return (
      <div>
        <h1>ComponentA</h1>
      </div>
    )
}
export default ComponentA

ComponentB.tsx

function ComponentB() {
    return (
      <div>
        <h1>ComponentB</h1>
      </div>
    )
}
  
export default ComponentB

Home.tsx

import { Link } from "react-router-dom";

function Home() {
    return (
      <div>
        Home
        <Link to={"/ComponentA"}>ComponentA</Link>
        <Link to={"/ComponentB"}>ComponentB</Link>
      </div>
    )
}
  
export default Home

あと、createBrowserRouter中にcreateRoutesFromElementsでRoute elementを追記する。

App.tsx

import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom"
import ComponentA from "./componentA"
import ComponentB from "./componentB"
import Home from "./Home"


function App() {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route>
        <Route path="/" element={<Home />} />
        <Route path="/componentA" element={<ComponentA />} />
        <Route path="/componentB" element={<ComponentB />} />
      </Route>,
    ),
  )
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  )
}

export default App

結果

正しくなリます

Layout 追加

共用のcomponent layout試す。

Layout.tsx

import { Outlet } from "react-router-dom"

function Layout() {
    return (
        <>
             layout
            <Outlet />
        </>
    )
}
  
export default Layout

共通の部分表せる。