溫馨提示×

React怎么實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由

小億
206
2024-01-25 16:53:05
欄目: 編程語言

要實(shí)現(xiàn)嵌套路由，可以使用React Router庫。下面是一個(gè)簡單的示例：

首先，安裝React Router庫：

npm install react-router-dom

然后，創(chuàng)建一個(gè)包含嵌套路由的父組件：

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;

在這個(gè)示例中，我們定義了四個(gè)路徑，分別對(duì)應(yīng)不同的組件。在/products路徑下，我們可以進(jìn)一步定義子路由。

接下來，創(chuàng)建一個(gè)包含動(dòng)態(tài)路由的子組件：

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;

在這個(gè)示例中，我們使用useRouteMatch鉤子來獲取父組件的路徑和URL。在渲染子組件時(shí)，我們使用了動(dòng)態(tài)路由參數(shù)（:productId），以匹配不同的產(chǎn)品詳情。

最后，創(chuàng)建一個(gè)用于顯示產(chǎn)品詳情的組件：

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

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

  return (
    <div>
      <h3>Product Detail - {productId}</h3>
      {/* 顯示產(chǎn)品詳情 */}
    </div>
  );
};

export default ProductDetail;

這樣，當(dāng)訪問/products/product1時(shí)，就會(huì)顯示Product Detail - product1。

通過React Router的路由配置和動(dòng)態(tài)路由參數(shù)，我們可以實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由。

0 踩