วิธีการกำหนด Routes ของ React Router v6

1
import ReactDOM from 'react-dom/client'
2
import { BrowserRouter } from 'react-router-dom'
3

4
ReactDOM.createRoot(document.getElementById('root')!).render(
5

6
{' '}
7

8
<React.StrictMode>
9
  <BrowserRouter>
10
    <App />
11
  </BrowserRouter>
12
</React.StrictMode>
13
)

1
import { Routes, Route, Outlet, Link } from 'react-router-dom'
2

3
export default function App() {
4
  return (
5
    <div>
6
      <h1>Basic Example</h1>
7

8
      {/* Routes nest inside one another. Nested route paths build upon
9
            parent route paths, and nested route elements render inside
10
            parent route elements. See the note about <Outlet> below. */}
11
      <Routes>
12
        <Route path="/" element={<Layout />}>
13
          <Route index element={<Home />} />
14
          <Route path="about" element={<About />} />
15
          <Route path="dashboard" element={<Dashboard />} />
16

17
          {/* Using path="*"" means "match anything", so this route
18
                acts like a catch-all for URLs that we don't have explicit
19
                routes for. */}
20
          <Route path="*" element={<NoMatch />} />
21
        </Route>
22
      </Routes>
23
    </div>
24
  )
25
}
26

27
function Layout() {
28
  return (
29
    <div>
30
      {/* A "layout route" is a good place to put markup you want to
31
          share across all the pages on your site, like navigation. */}
32
      <nav>
33
        <ul>
34
          <li>
35
            <Link to="/">Home</Link>
36
          </li>
37
          <li>
38
            <Link to="/about">About</Link>
39
          </li>
40
          <li>
41
            <Link to="/dashboard">Dashboard</Link>
42
          </li>
43
          <li>
44
            <Link to="/nothing-here">Nothing Here</Link>
45
          </li>
46
        </ul>
47
      </nav>
48

49
      <hr />
50

51
      {/* An <Outlet> renders whatever child route is currently active,
52
          so you can think about this <Outlet> as a placeholder for
53
          the child routes we defined above. */}
54
      <Outlet />
55
    </div>
56
  )
57
}
58

59
function Home() {
60
  return (
61
    <div>
62
      <h2>Home</h2>
63
    </div>
64
  )
65
}
66

67
function About() {
68
  return (
69
    <div>
70
      <h2>About</h2>
71
    </div>
72
  )
73
}
74

75
function Dashboard() {
76
  return (
77
    <div>
78
      <h2>Dashboard</h2>
79
    </div>
80
  )
81
}
82

83
function NoMatch() {
84
  return (
85
    <div>
86
      <h2>Nothing to see here!</h2>
87
      <p>
88
        <Link to="/">Go to the home page</Link>
89
      </p>
90
    </div>
91
  )
92
}

1
import { createBrowserRouter } from 'react-router-dom'
2

3
const router = createBrowserRouter([
4
  {
5
    path: '/',
6
    element: <Layout />,
7
    children: [
8
      {
9
        path: '/',
10
        index: true,
11
        element: <Home />
12
      },
13
      {
14
        path: 'about',
15
        element: <About />
16
      },
17
      {
18
        path: 'dashboard',
19
        element: <Dashboard />
20
      },
21
      {
22
        path: '*',
23
        element: <NoMatch />
24
      }
25
    ]
26
  }
27
])

1
import { RouterProvider } from 'react-router-dom'
2

3
ReactDOM.createRoot(document.getElementById('root')!).render(
4

5
{' '}
6

7
<React.StrictMode>
8
  <RouterProvider router={router} />
9
</React.StrictMode>
10
)