javascript - 如何始终在反应路由器中显示默认组件
问题描述
我想在每条路线中始终显示标题页。如何做到这一点。我希望 props.history 可以在该标题组件中访问,这样如果我点击任何东西,我就可以使用 props.history.push(); 导航到其他页面;
<BrowserRouter>
<div>
<Header/> // I want history in this component
<Route exact path="/" component={HomePage} />
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
</div>
</BrowserRouter>
);
解决方案
使用 Switch 一次渲染一条路线。如果您想要 Header 组件中的历史记录,请使用 react-router 中的 withRouter。(历史将作为道具传递给标题组件)
https://reacttraining.com/react-router/web/api/withRouter
/* header component */
import { withRouter } from 'react-router'
export default withRouter(Header)
/* router component */
<BrowserRouter>
<div>
<Header/> // I want history in this component
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/Picklistscreen" component={PickListArea} />
<Route path="/scanarea" component={ScanArea} />
</Switch>
</div>
</BrowserRouter>
推荐阅读
- service-worker - 使用 Webpack+Workbox 从 App build 中访问 service worker skipWaiting
- javascript - 将 Jquery 转换为纯 js
- r - 分组,聚合以根据条件创建新列
- solr - 如何在 Solr 无模式模式下启用 solr.SimplePatternTokenizerFactory?
- c# - Unity 2D 相对于变换更改对象位置
- laravel - 我想在我的 Laravel 项目中添加货币格式
- flutter - 如何在 Visual Studio Code 中录制屏幕?
- docker - 使用 GAE 柔性环境运行 docker 镜像时服务器发送的事件被阻止
- javascript - Node.js module.exports 带有输入的函数
- excel - 使用一个单元格中的基于文本的公式作为另一个单元格中的实际公式