Reactルーター

❮ 前次 ❯

Create React Appには、ページルーティングは含まれていません。

ReactRouterは最も人気のあるソリューションです。

Reactルーターを追加する

アプリケーションにReactRouterを追加するには、アプリケーションのルートディレクトリからターミナルでこれを実行します。

npm i -D react-router-dom

注：このチュートリアルでは、React Routerv6を使用します。

v5からアップグレードする場合は、@ latestフラグを使用する必要があります。

npm i -D react-router-dom@latest

フォルダ構造

複数のページルートを持つアプリケーションを作成するには、まずファイル構造から始めましょう。

フォルダ内に、いくつかのファイルで名前がsrc付けられたフォルダを作成します。pages

src\pages\：

Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js

各ファイルには、非常に基本的なReactコンポーネントが含まれます。

基本的な使用法

次に、ファイルでルーターを使用しindex.jsます。

例

React Routerを使用して、URLに基づいてページにルーティングします。

index.js：

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

例の説明

最初にコンテンツを。でラップします<BrowserRouter>。

次に、を定義します<Routes>。アプリケーションは複数持つことができます<Routes>。基本的な例では1つだけを使用しています。

<Route>sはネストできます。1つ目は、コンポーネント<Route>のパスを/ 持ち、コンポーネントをレンダリングしLayoutます。

ネストされ<Route>たは、親ルートを継承して追加します。したがって、blogsパスは親と結合され、になり /blogsます。

コンポーネントルートにはHomeパスはありませんが、 index属性があります。これは、このルートを親ルートのデフォルトルートとして指定します。これは/です。

をに設定するpathと*、未定義のURLのキャッチオールとして機能します。これは404エラーページに最適です。

認定を受けましょう！

Reactモジュールを完了し、演習を行い、試験を受けて、w3schools認定を取得してください!!

95ドル登録

ページ/コンポーネント

Layoutコンポーネントには要素があり<Outlet>ます<Link>。

は、選択されている現在の<Outlet>ルートをレンダリングします。

<Link>URLを設定し、閲覧履歴を追跡するために使用されます。

内部パスにリンクするときはいつでも、の<Link> 代わりにを使用し<a href="">ます。

「レイアウトルート」は、ナビゲーションメニューなど、すべてのページに共通のコンテンツを挿入する共有コンポーネントです。

Layout.js：

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

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

Home.js：

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

Blogs.js：

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

Contact.js：

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

NoPage.js：

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;

❮ 前次 ❯

Reactチュートリアル

Reactフック

React演習

Reactルーター