React 中的路由，在页面之间导航

Question

我是 React 新手，我不明白如何在页面之间导航/路由。 我开发了一个电子商务网站，在第一页我有图像，我想为每个图像单击一个新的不同页面，然后再次打开。

  export default function App() {
  return (
  <div>
  <Router>
     <Navbar />
     <Routes>
       <Route path="/" element={<Homes />}></Route>
       <Route path="products" element={<Products />}>
       <Route path="women" element={<Women />} >
       <Route path="men" element={<Men />} />
       <Route path="children" element={<Children />} />
       <Route path=":id" element={<???? />} /> 
       </Route>
       </Route>
     </Routes>
  <Footer />
  </Router>
</div>
)
}


export default function Homes () {
 return (
    <div>
        <DetailProduct />
        <Women/>
        <Men/>
        <Children/>
    </div>
 )
}

我不知道DetailProduct是否需要在这里

export default function Products() {
return (
<div className="products">
 <div className="productsNav">
    <Link to="/products/women"></Link>
    <Link to="/products/men"></Link>
    <Link to="/products/children"></Link>
 </div>
<Outlet />
</div>
);
}

women->skirt->detailProducts
women->jeans->detailProducts
men->pants->detailProducts

for "women" i want it open page with all the skirt and for jeans another page with all the jeans
<Route path=":id" element={<skirt />} /> 
but i have another element {<jeans />} how fix that?

for "men" another page
<Route path=":id" element={<pants />} /> 

我不知道如何处理详细产品，对于每条裙子，我想打开一个新页面，其中包含裙子的详细信息，牛仔裤相同，所有男士和儿童商品也相同。

Answer 1

早上好！ 它类似于html的锚标记。您必须在react-router-dom库中导入Link，如下例所示：

import { Link } from 'react-router-dom';

使用后如下所示：

<Link to={'/products'}> <img /> </Link>