阅读量:0
要实现嵌套路由，可以使用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的路由配置和动态路由参数，我们可以实现嵌套路由和动态路由。
