【2022年4月更新】React useNavigateの画面遷移方法をまとめてみました

初めに

Reactの画面遷移方法をまとめていきます。

2022年4月に更新しました。

なぜなら「react-router-dom」のバージョンが6系になることでなんとuseHistoryが使えなくなるからです。

その代わりにuseNavigateを使用した画面遷移方法を紹介し、そのルーティング設定方法も紹介します。

環境

"react": "^17.0.2"
"react-router-dom": "^6.3.0"

react-router-domの導入

package.jsonファイルが存在しているディレクトリにて以下のコマンドを実行し、ルーティング設定できるモジュールを導入します。

context上でパスを管理することができます。

npm install react-router-dom

画面の遷移方法

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

const ComponentA = () => {
    const navigate = useNavigate()
    return (
        <div>
            <p>ComponentA</p>
            <button onClick={() => navigate('/componentb')}>画面遷移します！</button>
        </div>
    )
}
export default ComponentA

Historyからの変更点

• react-router-domからのインポートがuseNavigateに変更
• onClickにはnavigateを使用し、遷移したいURLを指定する

ルーティング設定方法

import { BrowserRouter, Routes, Route } from "react-router-dom";
import ComponentA from "./component/ComponentA";
import ComponentB from "./component/ComponentB";

const Routers = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<ComponentA/>}/>
                <Route path="/componentb" element={<ComponentB/>}/>
            </Routes>
        </BrowserRouter>
    )
}
export default Routers

基本的にはRouteタグを増やしていくことでルーティングを設定していきます。

Historyからの変更点

• Routeによる遷移先の指定の際のタグ名が「component→element」に変わっています

サンプルコードはこちらから

ファイル構成

ソースコード

App.js

import Routers from './Routers';

const App = () => {
  return (
    <div className="App">
      <Routers/>
    </div>
  );
}

export default App;

Routers.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import ComponentA from "./component/ComponentA";
import ComponentB from "./component/ComponentB";

const Routers = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<ComponentA/>}/>
                <Route path="/componentb" element={<ComponentB/>}/>
            </Routes>
        </BrowserRouter>
    )
}
export default Routers

ComponentA.js

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

const ComponentA = () => {
    const navigate = useNavigate()
    return (
        <div>
            <p>ComponentA</p>
            <button onClick={() => navigate('/componentb')}>画面遷移します！</button>
        </div>
    )
}
export default ComponentA

ComponentB.js

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

const ComponentB = () => {
    const navigate = useNavigate()
    return (
        <div>
            <p>componentB!!!</p>
            <button onClick={() => navigate('/')}>画面遷移します！</button>
        </div>
    )
}
export default ComponentB

動作確認

まずは「localhost:3000」にアクセスしてみます。

次にRouters.jsにて定義した新たなパスにアクセスしてみます。

表示画面が「componentB!!!」に変わりました！

無事成功です

終わり