React怎么实现嵌套路由和动态路由

要实现嵌套路由，可以使用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;

在这个示例中，我们定义了四个路径，分别对应不同的组件。在/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;

在这个示例中，我们使用useRouteMatch钩子来获取父组件的路径和URL。在渲染子组件时，我们使用了动态路由参数（: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的路由配置和动态路由参数，我们可以实现嵌套路由和动态路由。