React 2023/02/08

React Router dom v6 route link navigate などの基本的な使い方

この記事では、create-react-app でアプリ作成後、React-Router-dom ver 6 を使ったルーティングの基本的な使い方を確認することができます。

アプリ作成とパッケージをインストール

react アプリを作成します。

create-react-app アプリ名

react-router-dom パッケージをインストールします。

npm install react-router-dom

ファイル構成

src//
  |-- components//
  |    |-- about.js
  |    `-- contact.js
  |-- App.js
  `-- index.js

ルーティング

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import About from './components/about';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

<BrowserRouter>、 <Routes>、 <Route> コンポーネントを使用します。これで、<App/> ( / )、 <About/> ( /about ) へのルーティングができました。

Link

import { Link } from 'react-router-dom'

function App() {

  return (
    <div className="App">
      <nav>
        <Link to="/">root</Link>
        <Link to="/about">about</Link>
      </nav>
      <main>
      </main>
      <footer></footer>
    </div >
  );
}

export default App;

1: Link コンポーネントに飛び先を指定 ( to ) すると、<a> タグが生成され、タップして別のページに移動できるようになります。

Navigate

import { useNavigate } from 'react-router-dom'

export default function About() {

    const navigate = useNavigate();
    const submit = () => {
        navigate('/')
    }

    return (
        <>
            <div>About</div>
            <button onClick={submit}>Submit</button>
        </>
    )
}

useNavigate コンポーネントを使うと、ある処理をした後に、指定のページに redirect をすることができます。

navigate(-1) 値に-1 を指定すると、戻るボタンを押すのと同じになります。

ネストとパラメータの取得

index.js ファイルを書き換えます。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import About from './components/about';
import Contact from './components/contact';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} >
        <Route path="contact/:id" element={<Contact />} />
      </Route>
        <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

ネストされた <Contact /> は、親コンポーネントの <App /> の中でレンダリングされます。

15: ( :id ) は動的なパラメータで、<Contact />内で取得することができます。この例では、1 のパラメータを取得しています。

<Contact/> がレンダリングされる場所

import { Link, Outlet } from 'react-router-dom'

function App() {

  return (
    <div className="App">
      <nav>
        <Link to="/">root</Link>
        <Link to="/about">about</Link>
        <Link to="/contact/1">contact</Link>
      </nav>
      <main>
        <Outlet context={100}></Outlet>
      </main>
      <footer></footer>
    </div >
  );
}

export default App;

1 , 16 : <App /> 内の Outlet コンポーネントの場所に、 <Contact /> の内容が表示されます。

10 : <Contact/> 表示用のLink を追加します。

16 : Outlet コンポーネントからも値を送ることができます。

<Contact/>内で値を取得する

import { useOutletContext, useParams } from "react-router-dom"

export default function Contact() {
  const params = useParams();
  const context = useOutletContext();
  console.log(params.id) // 1
  console.log(context) // 100
  return (
    <div>Contact {params.id}</div>
  )
}

useParams() で url のパラメータ、useOutletContext() で <Outlet/> で指定した値を取得することができます。

以上基本的な使い方です。

おまけ

NavLink コンポーネントを使用すると、リンクが active かどうか取得することができます。以下の例では、active なリンクの色を赤色にする例です。

import { NavLink, Outlet } from 'react-router-dom'

function App() {

  let active = {
    color: 'red'
  }
  return (
    <div className="App">
      <nav>
        <NavLink style={({ isActive }) => isActive ? active : undefined} to="/">root</NavLink>
        <NavLink style={({ isActive }) => isActive ? active : undefined} to="/about">about</NavLink>
        <NavLink style={({ isActive }) => isActive ? active : undefined} to="/contact/1">contact</NavLink>
      </nav>
      <main>
        <Outlet context={100}></Outlet>
      </main>
      <footer></footer>
    </div >
  );
}

export default App;

createBrowserRouter()ルーティングを書き換え



import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import About from './components/about';
import Contact from './components/contact';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "contact/:id",
        element: <Contact />,
      },
    ],
  },
  {
    path: "about",
    element: <About />
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

このようにも書き換えることができ、ルーティングが増えても見やすいです。