React BrowserRouter 不适用于嵌套路径 [英] React BrowserRouter not working with nested path
问题描述
我正在尝试使用 react BrowserRouter
将路径映射到组件,所有父路由都有效 -
I am trying to map a path to component using react BrowserRouter
, all of the parent route works -
<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-
But when I try to define a nested route /storeadmin/webkeytopayer-
<Route path='/storeadmin/webkeytopayer' render={({ history }) => <WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />} />
它重定向到/storeadmin 组件 MainTableComponent
而不是 WebKeyTableComponent
.我尝试使用精确"-
It redirect to /storeadmin component MainTableComponent
instead of WebKeyTableComponent
.
I tried using 'exact' -
<Route exact path='/storeadmin/webkeytopayer' render={({ history }) => <WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />} />
但结果相同.整个路由 -
But with the same result. Entire routing -
<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 - import { BrowserRouter, Route, Switch } from 'react-router-dom';
版本 -
import - import { BrowserRouter, Route, Switch } from 'react-router-dom';
Version -
"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"
}
}
推荐答案
你可以做 嵌套路由使用反应路由器:
You can do nested routing using react router:
假设您有以下路线:
<Route
// exact // This should not be exact as it have nested routes
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
路由创建嵌套路由,您可以在 MainTableComponent
中定义嵌套路由:
To create nested routing for /storeadmin
route, you can define nested routes inside MainTableComponent
:
// inside, render (class) or return of function, MainTableComponent:
import {
Switch,
Route,
Link,
withRouter,
} from 'react-router-dom'
class MainTableComponent extends Component {
render() {
const { path, url } = this.props.match
return (
<>
<div>I am MainTableComponent</div>
<Link to={`${url}/webkeytopayer`}>
Go to Webkeytopayer
</Link>
<Switch>
<Route
exact // This can be exact as it's the last level route
path={`${path}/webkeytopayer`}
render={({ history }) => (
<WebKeyTableComponent disableSearchBar={this.triggerBarDisplay} />
)}
/>
</Switch>
</>
)
}
}
export default withRouter(MainTableComponent)
这篇关于React BrowserRouter 不适用于嵌套路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!