React 中的嵌套路由无法使用 react-router v4 正确呈现

Question

我的根组件主开关是这样的

<Provider store={createStoreWithMiddleware(reducers)}>
    <HashRouter history={history} >
      <Switch>
        <Route exact path="/login" name="Login Page" component={Login}/>
        <Route exact path="/register" name="Register Page" component={Register}/>
        <Route exact path="/404" name="Page 404" component={Page404}/>
        <Route exact path="/500" name="Page 500" component={Page500}/>
        <Route path="/Console" name="Console" component={Console}/>
        <Route path="/" name="Home" component={Full}/>
      </Switch>
    </HashRouter>
  </Provider>

在 Console 组件中我有另一个这样定义的开关

<main className="container">
  <div className="">
    <Switch>
      <Route path="/Create" name="Create Park" component={CreateNew} />
      <Route path="/" name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

当我访问 /Console 时 HomePage 组件正常显示。

但是当我访问 /Console/Create CreateNew 组件时不会显示而是显示 HomePage 组件。

我做错了什么？我应该怎么做才能在 /Console/Create

处显示 CreateNew 组件

Answer 1

控制台组件重构如下：

<main className="container">
      <div className="">
        <Switch>
          <Route exact  path="/" name="Console" component={HomePage} />
          <Route exact  path="/Create" name="Create Park" component={CreateNew} />
    </Switch>
  </div>
 </main>

Answer 2

嵌套路由必须指定绝对路径，您可以使用match.path作为嵌套路由的前缀以提供绝对路径

<main className="container">
  <div className="">
    <Switch>
      <Route path={`${match.path}/Create`} name="Create Park" component={CreateNew} />
      <Route path={`${match.path}/`} name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

或者指定完整路径

<main className="container">
  <div className="">
    <Switch>
      <Route path="/Console/Create" name="Create Park" component={CreateNew} />
      <Route path="/Console/" name="Console" component={HomePage} />
    </Switch>
  </div>
</main>

根据 React-Router match 文档：

A match object contains information about how a matched the URL. match objects contain the following properties:

params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path

isExact - (boolean) true if the entire URL was matched (no trailing characters)

path - (string) The path pattern used to match. Useful for building nested s

url - (string) The matched portion of the URL. Useful for building nested s

React 中的嵌套路由无法使用 react-router v4 正确呈现

Nested Routes in React not rendering correctly with react-router v4

javascript

reactjs

react-router

react-router-dom