Morioh
Login
中條 美冬

中條 美冬

5 months ago

React 18 で React Router v6 を使用してルートを作成する方法

React Router は、React アプリケーション用の人気のあるルーティング ライブラリです。これにより、アプリケーションのルートを定義し、現在の URL に応じてさまざまなコンポーネントをレンダリングできます。これにより、ネイティブ モバイル アプリのようなシングル ページ アプリケーション (SPA) を簡単に作成できます。

このチュートリアルでは、React Router v6 ライブラリを使用して React でルーティングを処理する方法を学び、React で React Router をセットアップする方法も学びます。

目次

  • ステップ 1: 新しいアプリケーションを構築する
  • ステップ 2: 機能コンポーネントの作成
  • ステップ 3: React Router Dom をセットアップする
  • ステップ 4: ナビゲーション ルートを作成する
  • ステップ 5: React Router でルートを処理する
  • ステップ 6: BrowserRouter API を使用してルートを登録する
  • ステップ 7: ブラウザ上でアプリを実行する

ステップ 1: 新しいアプリケーションを構築する

次のコマンドを実行して、新しい React アプリをインストールします。

npx create-react-app react-demo

プロジェクトフォルダーに移動します。

cd react-demo

ステップ 2: 機能コンポーネントの作成

src/ フォルダ内に components/ フォルダを作成します。 .

次に、components/Home.js ファイルを作成します。

import React from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default Home

次に、components/Profile.js ファイルを作成します。

import React from 'react'
function Profile() {
  return (
    <div>Profile</div>
  )
}
export default Profile

components/Contact.js ファイルを作成し、指定されたコードを挿入します。

import React from 'react'
function Contact() {
  return (
    <div>Contact</div>
  )
}
export default Contact

ステップ 3: React Router Dom をセットアップする

React で React Router を使用するには、指定されたコマンドを使用して Router パッケージをインストールします。

npm i react-router-dom --legacy-peer-deps

ステップ 4: ナビゲーション ルートを作成する

このステップでは、まずコンポーネントフォルダを開き、Nav.js<を作成します。 /span> ファイル。

次のコードをファイルに必ず配置してください。

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";
import Contact from "./Contact";
const Nav = () => {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};
export default Nav;

ステップ 5: React Router でルートを処理する

App.js ファイルに移動し、指定されたコードを追加する必要があります。

次のコード例で示されているように、必ず Nav モジュールと Link コンポーネントをインポートしてください。

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import Nav from "./components/Nav";
const App = () => {
  return (
    <div className="container">
      <h2>React Configure Base Path Example</h2>
      <div className="mb-5">
        <Link className="nav-link link-danger" to="/">
          Home
        </Link>
        <Link className="nav-link link-danger" to="profile">
          Profile
        </Link>
        <Link className="nav-link link-danger" to="contact">
          Contact
        </Link>
      </div>
      <div>
        <h3>
          <Nav />
        </h3>
      </div>
    </div>
  );
};
export default App;

ステップ 6: BrowserRouter API を使用してルートを登録する

Index.js ファイルを開きます。ここで、BrowserRouter API をインポートし、以下に示すように指定されたコードを必ず挿入する必要があります。

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter basename="/positronx">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

ステップ 7: ブラウザ上でアプリを実行する

コマンドを実行して React アプリケーション サーバーを起動できます。

npm start

アプリにアクセスするには、指定された URL を使用する必要があります。

http://localhost:3000/positronx

このチュートリアルでは、React Router v6 ライブラリを使用して React でルーティングを処理する方法と、React で React Router をセットアップする方法を学びました。

2.35 GEEK