reactjs - 带有反应路由器 5 的嵌套路由
问题描述
我想切换嵌套的子元素。这是我的代码:
index.js
:
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
App.js
:
<Switch>
<Route exact path="/component" component={ Component }/>
<Route exact path="/component/test" component={ Test }/>
<Route exact path="/component/test/ui" component={ Ui }/>
</Switch>
Ui.js
:
import {BrowserRouter as Router} from "react-router-dom";
<Router>
<Navbar>
<Link to='/component/test/ui/page'>
Page
</Link>
<Link to='/component/test/ui/element' >
Element
</Link>
</Navbar>
<Switch>
<Route
exact path='/component/test/ui/page'
component={Page}
/>
<Route
exact path='/component/test/ui/element'
component={Element}
/>
</Switch>
</Router>
现在在Ui
组件中我想切换这个子元素。当我单击页面或元素链接时,此代码有效,但在页面刷新或在地址栏上搜索时无效。
注意:我不想Ui
在App.js
. 你也可以建议我使用 Redux。
解决方案
推荐阅读
- ios - 根据indexPath.section和indexPath.row判断多维结构的cell类型
- odoo - Odoo 只看到一个要登录的数据库,但同一个 odoo 用户有更多的数据库
- javascript - “npm r build”和“npm run build”的区别?
- javascript - 一些方法有效,但不是全部
- keras - 数据增强会损害准确性 Keras
- hyperledger-fabric - 链码解释
- sql - 在 pyspark 中实现 MERGE INTO sql
- android - Page Inflator 在 onPageChangeListener() 中不起作用
- python - 计算句子中的字符
- r - 用R中的开始和结束时间总结数据框?