React BrowserRouter不适用于嵌套路径

Question

我正在尝试使用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"
      }
    }

Answer 1

因此react Router不支持子域-React-router subdomain routing但是我找到了解决方法-

Answer 2

您可以使用反应路由器执行nested routing：