React ルーターの動的ルート

1. React ルーターの動的ルート
2. React Router カスタム コンポーネント
3. React ルーターの動的ルートの例

React は、Web アプリケーションを構築するための最も一般的なライブラリではないにしても、そのうちの 1つです。 しかし、React が UI のレンダリングを扱う単なるライブラリであることを知っている人は多くありません。

Angular のようなルーティング用の組み込みソリューションはありません。 このため、React 開発者は外部ライブラリを使用して React にルーティング機能を実装する必要があります。

ほとんどの開発者は react-router を使用して、React にナビゲーションおよびルーティング機能を実装します。

React ルーターの動的ルート

複数のページを持つ Web アプリケーションを構築する場合は、URL のパターンであるルートを定義する必要があります。

たとえば、react-router を使用して、URL が www.mywebsite.com/ の場合、React が Home コンポーネントを表示するように指定できます。

アプリケーションに同じ種類のページが多数ある場合、状況は少し複雑になります。 たとえば、ブログにアクセスすると、次のように、各投稿の URL にタイトルが含まれているのが一般的です。

何千もの投稿や商品がある場合、それぞれのルートを手動で定義することはできません。 幸いなことに、React Router を使用すると、特定のアイテムの URL を自動的に生成する動的ルートを簡単に作成できます。

この記事では、React アプリでそのような機能を実現する方法を示します。

React Router カスタム コンポーネント

まず、インポートする 4つのカスタム コンポーネントから始めましょう。 これらは、react-router ライブラリの最も一般的に使用されるカスタム コンポーネントです。

<BrowserRouter> は、ページ間のナビゲーションを処理するメイン コンポーネントです。 ブラウザと連携して、各 URL の適切なページを表示します。

<BrowserRouter> は、アプリケーション全体をラップする必要があります。 このラッパーの開始タグと終了タグの間でのみ、他のカスタム コンポーネントを使用できます。

詳細については、公式ドキュメント を参照してください。

<Routes> とその子 <Route> コンポーネントを使用して、現在の URL (場所) に基づいて何をレンダリングする必要があるかを指定します。 詳細はこちらこちら。

最後に、<Link> コンポーネントは、HTML の <a> 要素の修正バージョンです。 あるページから別のページへの移行がよりスムーズになります。

ユーザーが <Link> URL をクリックしても、React アプリはリロードされません。 ユーザーをすぐに目的地に連れて行きます。

<Link> コンポーネントの詳細については こちら をご覧ください。

React ルーターの動的ルートの例

3つの投稿があるアプリケーションの実際の例を見てみましょう。

import "./styles.css";
import { BrowserRouter, Routes, Link, Route } from "react-router-dom";
import { useParams } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="posts/:title" element={<Post />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  var posts = [
    { title: "Guide to React" },
    { title: "Guide to Vue" },
    { title: "Guide to Angular" }
  ];
  return (
    <div className="App">
      Hello
      {posts.map((post) => (
        <>
          <br />
          <Link to={"posts/" + post.title}>{post.title}</Link>
          <br />
        </>
      ))}
    </div>
  );
}

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

CodeSandboxでコードをいじることができます。

まず、<BrowserRouter>、<Routes>、<Route>、<Link> の 4つのカスタム コンポーネントをインポートします。 後で説明する useParams フックもインポートします。

コンポーネントでパスをマップする <Route> コンポーネントを含むメイン コンポーネント App があります。

<Route> コンポーネントの最初のインスタンスはかなり単純です。 訪問者が '/' ページ ('website.com/') にいる場合、<Home> コンポーネントをレンダリングするように React に指示します。

<Route> コンポーネントの 2 番目のインスタンスは異なります。 その path 属性は "posts/:title" 文字列と同じです。

これは、URL が "posts/:title" に一致する場合、<Post> コンポーネントを表示することを意味します。 セミコロン : は、URL の title 部分を動的に生成できることを意味します。

投稿のタイトルが 'Guide to React' の場合、URL は 'website.com/posts/Guide To React' になります。

Home コンポーネントで動的 URL を生成します。 3つの投稿の配列があり、それぞれに固有のタイトルが付いています。

.map() JavaScript メソッドを使用して、投稿ごとに固有のリンクを作成するカスタム <Link> コンポーネントを生成します。

最も重要な部分は、<Link> カスタム コンポーネントの to 属性です。 詳しく見てみましょう。

<Link to={"posts/" + post.title}>{post.title}</Link>

"posts" と post.title の値の 2つの文字列を連結します。これは各投稿に固有です。 その結果、各 URL には URL に投稿のタイトルが含まれます。

URL から値にアクセスする

各 <Route> コンポーネントは、URL パスと、URL に基づいてどのコンポーネントをレンダリングする必要があるかを指定します。 <Post> 子コンポーネントがレンダリングされると、useParams() フックを使用して、URL から :title 変数にアクセスできます。

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

{urlParameters.title} 構文を使用して、URL パラメータの値を表示します。 JavaScript 式はすべて中括弧で囲む必要があります。