react-router

今回はreact-routerをやります。

react-routerは画面遷移を制御してくれます。react-routerはReact本体の機能ではなく、Reactの画面制御のために作られた外部コンポーネントです。

環境構築

コマンドプロンプトでプロジェクトフォルダに移動して以下のコマンドを作成します。
プロジェクト作成自体ははじめにを参照して下さい。


npm install react-router

タグでルーティング指定

src\App.jsx



import { BrowserRouter, Link, Route, Routes } from 'react-router';

function Hello() {
  return <h1>Hello World</h1>;
}

function About() {
  return <h1>About Message</h1>;
}

function App() {

  return (
    <>
      <BrowserRouter>
        <div>
          <Link to="/">Hello</Link>|
          <Link to="/test">Test</Link>|
          <Link to="/about">About</Link>|
        </div>
        <Routes>
          <Route path="/" element={<Hello />} />
          <Route path="/test" element={<h1>Test Page</h1>} />
          <Route path="/about" Component={About} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App

BrowserRouterで囲みます。
Linkでリンクを作成し、Routes内のRouteで条件に合うものを表示します。

出力対象は、elementでもComponentでも指定可能です。

実行イメージ

Outletで出力指定

src\App.jsx



import { BrowserRouter, Link, Route, Routes, Outlet } from 'react-router';

function Hello() {
  return <h1>Hello World</h1>;
}

function Base() {
  return (
    <>
      <div>
        <Link to="/">Hello</Link>|
        <Link to="/test">Test</Link>|
        <Link to="/about">About</Link>|
      </div>
      <h2>header</h2>
      <Outlet />
      <h2>footer</h2>
    </>
  );
}

function About() {
  return <h1>About Message</h1>;
}

function App() {

  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Base />} >
            <Route index element={<Hello />} />
            <Route path="/test" element={<h1>Test Page</h1>} />
            <Route path="/about" Component={About} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App

Outletで出力する場所を指定しています。
親RouteにOutletを置き、子Routeをそこに表示します。

実行イメージ

オブジェクトでルーティング指定

src\App.jsx


import { createBrowserRouter, RouterProvider, Link, Outlet } from 'react-router';

function Hello() {
  return <h1>Hello World</h1>;
}

function Base() {
  return (
    <>
      <div>
        <Link to="/">Hello</Link>|
        <Link to="/test">Test</Link>|
        <Link to="/about">About</Link>|
      </div>
      <h2>header</h2>
      <Outlet />
      <h2>footer</h2>
    </>
  );
}

function About() {
  return <h1>About Message</h1>;
}


const router = createBrowserRouter([
  {
    path: "/", Component: Base,
    children: [
      { index: true, Component: Hello },
      { path: "test", element: <h1>Test Page</h1> },
      { path: "about", Component: About },
    ]
  },
]);

function App() {

  return (
    <RouterProvider router={router} />
  )
}

export default App

Outletで出力指定のサンプルと同じ動作をします。

ページのトップへ戻る