react-router-dom

React

インストール

npx create-react-app [任意のアプリ名]
cd [任意のアプリ名]
npm install react-router-dom

src/App.js

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

function App() {
    return(
        <>
        <BrowserRouter>  ※1
            <Link to="/">Home</Link>  ※2
            <Link to="/about">About</Link>
            <Routes>　※3
                <Route path="/" element={<Home />} />　※4
                <Route path="/about" element="{<About />}" />
                <Route path="*" element={<h1>NOT FOUND PAGE</h1>} />  ※5
            </Routes>
        </BrowserRouter>
        </>
    );
}
export default App;

※1 … ひとつのアプリでBrowserRouterは1回しか書いてはいけません

※2 … aタグの代わりにLinkタグを使います

※3 … RouteはRoutesの中に入れます。Routesタグを書いた場所にコンポーネントの内容が表示されます

※4 … Routeタグでは「どのURLにアクセスすると、どのコンポーネントを表示するか」を決めます

※5 … 「*」は用意されていないURL全般を指します

src/Home.js

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


const Home = () => {

    const navigate = useNavigate();
    const clickBack = () => {
        navigate(-1);   ※1
    };

    return(
        <>
            <h1>Home</h1>
            <button onClick={clickBack}>BACK</button>
        </>
    )
}
export default Home;

※1 … 「‐1」とすればひとつ前のページに戻れます。「(‘/about’)」とすればAboutページにナビゲートされます。

react-router-domはSPAに最適化されている

react-router-domは主にSPAを作るときに使われます。

<Link>を使ってページを切り替えても、ブラウザのページ全体をリロードせずにコンポーネントを変更できます。

これにより素早いページ遷移が可能になります。

逆にNext.jsでは、next/linkやnext/routerを使いますし、MPA（マルチページアプリケーション）では普通に<a href=”/about”>のようなリンクで遷移します。

BACK