reactjs - React BrowserRouter 不适用于嵌套路径
问题描述
我正在尝试使用 react 映射到组件的路径BrowserRouter
,所有父路由都有效-
<Route path="/storeadmin" render={(props) => <MainTableComponent isUpdateScreen={false} tableData={this.state.tableData}/>} />
<Route path='/Attributs' render={({ history }) => <AttributsTable history={history} allSkus={this.state.allSkus} allAttrNames={this.state.allAttrName} updateViewTypeForNew={this.setViewType} />} />
<Route path='/Updates' render={({ history }) => <MainTableComponent isUpdateScreen={true} />} />
但是当我尝试定义嵌套路由 /storeadmin/webkeytopayer-
<Route path='/storeadmin/webkeytopayer' render={({ history }) => <WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />} />
它重定向到 /storeadmin 组件MainTableComponent
而不是WebKeyTableComponent
. 我尝试使用“精确”-
<Route exact path='/storeadmin/webkeytopayer' render={({ history }) => <WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />} />
但结果相同。整个路由 -
<BrowserRouter>
<Switch>
<Route path="/storeadmin" render={(props) => <MainTableComponent isUpdateScreen={false} tableData={this.state.tableData}
updateViewTypeForNew={this.setViewType}
searchTerm={this.state.searchValue} refreshTable={this.refreshTable} />} />
<Route exact={true} path="/" render={(props) => <MainTableComponent isUpdateScreen={false} tableData={this.state.tableData}
updateViewTypeForNew={this.setViewType}
searchTerm={this.state.searchValue} refreshTable={this.refreshTable} />} />
<Route path='/Attributs' render={({ history }) => <AttributsTable history={history} allSkus={this.state.allSkus} allAttrNames={this.state.allAttrName} updateViewTypeForNew={this.setViewType} />} />
<Route path='/Updates' render={({ history }) => <MainTableComponent isUpdateScreen={true} />} />
<Route exact path='/storeadmin/webkeytopayer' render={({ history }) => <WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />} />
<Route path='/webkeytopayer' render={({ history }) => <WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />} />
</Switch>
</BrowserRouter>
进口 -import { BrowserRouter, Route, Switch } from 'react-router-dom';
版本 -
"react-router-dom": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
"integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
"requires": {
"history": "^4.7.2",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.1",
"react-router": "^4.3.1",
"warning": "^4.0.1"
}
}
解决方案
所以反应路由器不支持子域- 反应路由器子域路由 但是我找到了解决方法-
<Route
path="/storeadmin"
render={(props) => {
const onWebkey = window.location.pathname.indexOf('webkeytopayer') !== -1
if (onWebkey)
return (
<WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />
)
return (
<MainTableComponent
isUpdateScreen={false}
tableData={this.state.tableData}
updateViewTypeForNew={this.setViewType}
searchTerm={this.state.searchValue}
refreshTable={this.refreshTable}
/>
)
}}
/>
推荐阅读
- android - 应用程序显示一些不相关的文本而不是 Textview
- c# - 在c#中手动添加行时如何过滤datagridview
- algorithm - 根据 2D 投影坐标查找等边三角形的 3D 点
- random - 如何在不引入偏差的情况下生成一个范围内的随机 Rust 整数?
- c - MSP430:需要帮助设置此 TimerA
- html - 使用 boostrap 为台式机和笔记本电脑 13 英寸设置 col 布局
- exception - Java Try Catch 装饰器
- ios - 不调用 iOS 12 Handoff 委托方法
- android - 当用户使用适配器单击项目时隐藏和显示项目
- php - PHP PGP 在导入前检查密钥大小