Reactでは、ネストされたルートとダイナミックなルートをどのように実装しますか？

2年 ago
夏樹, 風
2 minutes

React Routerライブラリを使用すると、ネストされたルートを実装できます。以下に簡単な例を示します。

最初に、React Routerライブラリをインストールしてください。

npm install react-router-dom

その後、ネストされたルートを含む親コンポーネントを作成します。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Products from './Products';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/products" component={Products} />
      </Switch>
    </Router>
  );
};

export default App;

この例では、異なるコンポーネントに対応する4つのパスを定義しました。/productsパスの下で、さらにサブルートを定義することができます。

次に、動的ルーティングを含むサブコンポーネントを作成してください。

import React from 'react';
import { Link, Route, Switch, useRouteMatch } from 'react-router-dom';

import ProductDetail from './ProductDetail';
import ProductList from './ProductList';

const Products = () => {
  const { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Products</h2>
      <ul>
        <li>
          <Link to={`${url}/product1`}>Product 1</Link>
        </li>
        <li>
          <Link to={`${url}/product2`}>Product 2</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>Please select a product.</h3>
        </Route>
        <Route path={`${path}/:productId`} component={ProductDetail} />
      </Switch>
    </div>
  );
};

export default Products;

この例では、親コンポーネントのパスとURLを取得するために、useRouteMatchフックを使用します。子コンポーネントをレンダリングする際に、動的なルートパラメータ（:productId）を使用して、異なる製品の詳細を一致させます。

最後に、製品の詳細を表示するコンポーネントを作成します。

import React from 'react';
import { useParams } from 'react-router-dom';

const ProductDetail = () => {
  const { productId } = useParams();

  return (
    <div>
      <h3>Product Detail - {productId}</h3>
      {/* 显示产品详情 */}
    </div>
  );
};

export default ProductDetail;

/products/product1にアクセスすると、Product Detail – product1が表示されます。

React Routerのルーティング構成とダイナミックルーティングパラメータを使用することで、入れ子のルートとダイナミックルートを実現することができます。

bannerAds