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