为了实现保持URL路径的情况下导航到子类别的效果,可以使用React Router的“嵌套路由”概念来解决。嵌套路由允许将不同的路由组合在一起,形成一个继承关系。这样,当用户在子类别中导航时,URL路径就会随之更新,反映其位置关系。
以下是使用React Router v4实现嵌套路由的代码示例。假设我们有一个名为“Products”的父类别,下面有三个子类别:“Shirts”、“Trousers”和“Accessories”。首先,我们需要将所有子类别的路由与父类别的路由连接起来。然后,我们可以在每个子类别的路由配置中指定它所属的父类别路径。
import React from 'react';
import { BrowserRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
const Products = ({ match }) => (
Products
Shirts
Trousers
Accessories
);
const Shirts = () => Shirts
;
const Trousers = () => Trousers
;
const Accessories = () => Accessories
;
const App = () => (
下一篇:保持URL中的参数重定向