从react-router中的嵌套路由路由到另一个父路由,可以通过以下步骤实现:
<Switch>
组件包裹子路由,以确保只有一个子路由被渲染。<Route>
组件定义子路由的路径和对应的组件。<Link>
组件或<NavLink>
组件创建导航链接,以便在点击时切换到其他父路由。下面是一个示例代码:
// 导入所需的依赖
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
// 定义父路由组件
const ParentRoute = () => {
return (
<div>
<h1>父路由</h1>
<ul>
<li>
<Link to="/parent/child1">子路由1</Link>
</li>
<li>
<Link to="/parent/child2">子路由2</Link>
</li>
</ul>
<Switch>
<Route path="/parent/child1" component={Child1} />
<Route path="/parent/child2" component={Child2} />
</Switch>
</div>
);
};
// 定义子路由组件
const Child1 = () => {
return <h2>子路由1</h2>;
};
const Child2 = () => {
return <h2>子路由2</h2>;
};
// 在根组件中使用路由
const App = () => {
return (
<Router>
<Switch>
<Route path="/parent" component={ParentRoute} />
</Switch>
</Router>
);
};
export default App;
在上述示例中,我们定义了一个父路由组件ParentRoute
,包含两个子路由Child1
和Child2
。在父路由组件中,我们使用<Link>
组件创建了两个导航链接,分别对应子路由的路径。在根组件App
中,我们使用<Route>
组件定义了父路由的路径和对应的组件。
这样,当用户点击导航链接时,就可以从嵌套路由中路由到另一个父路由了。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云云服务器负载均衡(CLB)。
领取专属 10元无门槛券
手把手带您无忧上云