close

URL のフォーマットと Routing React- 使用ガイド React Router

React アプリケーションでは、URL の書式設定は、 routing ページの移動や対応するコンテンツの表示において重要な役割を果たします。 React で管理するにはライブラリ routing を使用します 。 ここでは、 React アプリケーションで URL をフォーマットし、処理するために 使用する方法に関する基本的なガイドを示します。 React Router React Router routing

 

インストール React Router

ターミナルでプロジェクト ディレクトリを開き、次のコマンドを実行してインストールします 。 React Router npm install react-router-dom

必要なコンポーネントを React コンポーネントにインポートします。 React Router

 

ルートの定義

この コンポーネントを使用して React アプリケーションをラップし、ベース URL 形式を設定します。 <BrowserRouter>

この <Route> コンポーネントを使用して、アプリケーション内でルートを定義します。

例： 

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}

 

Link を 定義する

このコンポーネントを使用して、 アプリケーション内に ナビゲーションを作成します。 <Link> link

例： 

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}

 

アクセスパスパラメータ

パスパラメータにアクセスするには、形式の属性 <Route> を持つコンポーネント を使用します 。 path /users/:id

で定義されたコンポーネント内では、 を使用して パス パラメータの値にアクセス <Route> できます。 useParams()

例： 

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}

 

使用 Switch および Redirect

この コンポーネントを使用して、パスに一致する最初のルートのみをレンダリングします。 <Switch>

ユーザーは、ある指定されたパスから別のパスへコンポーネントを 使用します 。 <Redirect> redirect

例： 

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}

 

routing これらは、URL フォーマットとReact での を使用する ための基本的な概念です 。 を利用すると 、URL に基づいてさまざまなコンテンツをナビゲートして表示する機能を備えた柔軟な React アプリケーションを作成できます。 React Router React Router