React Router画面遷移 `useNavigate`について

背景

以前このような記事を書きました。

その続きです

やったこと

useNavigateを用いてボタンから画面遷移

コード

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

//App.jsx
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import { Home } from './Home.jsx';
import { Page1 } from './Page1.jsx';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">homeへ</Link>
        <br />
        <Link to="/page1/1">page1</Link>
        <br />
        <Link to="/page1/2">page2</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1/:id" element={<Page1 />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

//Page1.jsx
import { useNavigate, useParams } from 'react-router-dom';

export const Page1 = () => {
  const navigate = useNavigate();
  const { id } = useParams();

  return (
    <>
      <div>
        <h1>Page1です</h1>
        <p>URLのIdは{id}です</p>
        <button onClick={() => navigate('/')}>homeへ行くんだ</button>
      </div>
    </>
  );
};

// home.jsx
export const Home = () => {
  return (
    <div>
      <h1>Homeです</h1>
    </div>
  );
};

useNavigateを用いてボタンから画面遷移

useNavigateとは？

Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.

ユーザー操作やエフェクトに応じてブラウザ内をプログラム的に移動させるための関数を返します
↓
useNavigate は「コードの中から、任意のタイミングでページ遷移させるためのフック」です。という感じ

<Link>は「クリックされたらそのURLへ遷移する」という宣言的なリンクですが、useNavigateは、ボタンが押されたら〜のonClickイベントハンドラーや、関数の中でゴニョゴニョしてからページ遷移みたいなことができます。

使い方とか

// Page1.jsx
import { useNavigate, useParams } from 'react-router-dom';

export const Page1 = () => {
  const navigate = useNavigate();
  const { id } = useParams();

  return (
    <>
      <div>
        <h1>Page1です</h1>
        <p>URLのIdは{id}です</p>
        <button onClick={() => navigate('/')}>homeへ行くんだ</button>
      </div>
    </>
  );
};

ここではonClickを呼んだタイミングでnavigate('/')を定義してあげることで、homeコンポーネントを再表示してあげることができます

この/でhomeを表示するというのは、App.jsxで定義しているから可能です

// App.jsx
<Routes>
	<Route path="/" element={<Home />} />
    <Route path="/page1/:id" element={<Page1 />} />
</Routes>

任意のタイミングでnavigate('/')を呼び出せるので、こんな感じでも使えます

// Page1.jsx
import { useNavigate, useParams } from 'react-router-dom';

export const Page1 = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  
  const onClickButton = () => {
    console.log('画面遷移するよ〜')
    console.log('3')
    console.log('2')
    console.log('1')
    navigate('/')
  }

  return (
    <>
      <div>
        <h1>Page1です</h1>
        <p>URLのIdは{id}です</p>
        <button onClick={onClickButton}>homeへ行くんだ</button>
      </div>
    </>
  );
};

このサンプルコードではconsole.logですが、条件分岐やロジックを入れるような仕組みにするのもありかもです。まだ試したことはないですが…

// Page1.jsx
import { useNavigate, useParams } from 'react-router-dom';

export const Page1 = () => {
  const navigate = useNavigate();
  const { id } = useParams();

  return (
    <>
      <div>
        <h1>Page1です</h1>
        <p>URLのIdは{id}です</p>
        <button onClick={() => navigate(-1)}>戻るぜ</button>
        <button onClick={() => navigate(1)}>進むぜ</button>
      </div>
    </>
  );
};

引数に-1を指定するとブラウザの戻る、1を指定するとブラウザの進むになります

注意点

BrowserRouter配下でしか利用できません。

// App.jsx
import { BrowserRouter, Link, Route, Routes, useNavigate } from 'react-router-dom';
import { Home } from './Home.jsx';
import { Page1 } from './Page1.jsx';

function App() {
  // これはできません
  const navigate = useNavigate();
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">homeへ</Link>
        <br />
        <Link to="/page1/1">page1</Link>
        <br />
        <Link to="/page1/2">page2</Link>
      </nav>
      <button onClick={ () => navigate('/') }>どこかへ</button>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1/:id" element={<Page1 />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

これはできません
<button onClick={ () => navigate('/') }>どこかへ</button>は<BrowserRouter>配下だからいけるじゃん〜と思いましたが、useNavigate()自体は外側で定義されています

感想

• Reactってusexxx系多いすね
• const navigate = useNavigate();を<BrowserRouter>で5分は溶かした

参考