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组件。

我在这里做错了什么？我该怎么做才能在CreateNew

显示/Console/Create组件

Answer 1

嵌套路由必须指定绝对路径，您可以使用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文档：

匹配对象包含有关匹配方式的信息   URL。 match对象包含以下属性：

params - (object)从对应的URL解析的键/值对   到路径的动态段

isExact - (boolean)如果整个网址匹配，则为true（无跟踪   字符）

path - (string)用于匹配的路径模式。对建筑有用   嵌套的

url - (string)网址的匹配部分。对建筑有用   嵌套的

Answer 2

Console组件重构如下：

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

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

2 个答案: