ブラウザーローダー、ルート、リンク、およびuseNavigate

React Routerとは何ですか？

React RouterはReactアプリケーションでのナビゲーションに使用されるライブラリです。

ブラウザをリフレッシュせずにユーザーがページ間を移動するのを助けます。

React Routerをインストールするには：

npm install react-router-dom

1. BrowserRouter

BrowserRouterはルーティングのメインラッパーです。

UIをブラウザのURLと同期させます。

例：

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

function Home() {
  return <h1>Home Page</h1>;
}

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

function App() {

  return (
    <BrowserRouter>

      <nav>
        <Link to="/">Home</Link>


        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

なぜBrowserRouterを使用するのですか

BrowserRouterがないと、ルーティングは機能しません

それにより以下のことが可能になります

URLの処理
ナビゲーション
ルート管理

2. ルートとルート

Routesはすべてのルートをグループ化するために使用されます

ルートは特定のURLに対してどのコンポーネントをロードするかを定義します.

例:

import { Routes, Route } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

説明
パス読み込まれるコンポーネント
/ ホーム
/about アバウト

ユーザーが/aboutにアクセスすると、ReactはAboutコンポーネントを表示します.

3. リンク

通常、HTMLはタグを使用してナビゲーションを行います

しかし、React RouterではLinkを使用します

なぜですか

なぜならはページをリロードするからです
Linkはページをリフレッシュせずにページを変更します

例：

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div>
      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>
    </div>
  );
}

export default Navbar;

出力
ホームをクリックするとホームページに移動します
アバウトをクリックするとアバウトページに移動します
ページのリフレッシュは発生しません

4. useNavigateフック

useNavigateプログラムによるナビゲーションに使用されます

これはJavaScriptコードを使用してナビゲーションが行われることを意味します

例:

ログイン後
フォーム送信後
ユーザーをリダイレクトします

例：

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

function Login() {

  const navigate = useNavigate();

  function handleLogin() {
    alert("Login Successful");

    navigate("/home");
  }

  return (
    <div>
      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

説明

ボタンがクリックされた場合：

アラートメッセージが表示されます
ユーザーは自動的に /home に移動します
完全な例

import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useNavigate
} from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

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

function Login() {

  const navigate = useNavigate();

  function loginUser() {
    navigate("/");
  }

  return (
    <button onClick={loginUser}>
      Go Home
    </button>
  );
}

function App() {

  return (
    <BrowserRouter>

      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

React Routerの利点
迅速なナビゲーション
ページのリフレッシュなし
より良いユーザー体験
簡単なルーティングシステム
SPAに適しています

おすすめ購読元

DEV Community