🙆
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
共通の部分表せる。
Discussion