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屋！