Question

我正在构建一个具有2个父布局（Public.js和Main.js）的应用，它们分别位于Router（BrowserRouter）和Switch中。我可以匹配所有“公共”路线，但“公共”下的任何内容都不匹配，并且“公共”模板仍然存在。

我尝试了几种方法，结果相同：

V1路线：

...
<Router>
      <Switch>
        <Public>
          <Route exact path='/' component={Home} />
          <Route path='/login' component={Login} />
          <Route path='/register' component={Register} />
        </Public>
        <Main>
          <Route path='/dashboard' component={Dashboard} />
          <Route path='/file/records' component={Records} />
        </Main>
        <Route component={NoMatch} />
      </Switch>
    </Router>
...

V1：Public.js

...
<div className="container-fluid">
{ this.props.children }
</div>
...

V1：Main.js

...
<main className="bmd-layout-content">
<div className="container-fluid p-0">
{ this.props.children }
</div>
</main>
...

V2路线：

 ...
    <Router>
    <Switch>
    <Public />
    <Main />
    <Route component={NoMatch} />
    </Switch>
    </Router>
    ...

V2公开：

...
<div className="container-fluid">
<Route exact path='/' component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
</div>
...

V2 Main：

...
<main className="bmd-layout-content">
<div className="container-fluid p-0">
<Route path='/dashboard' component={Dashboard} />
<Route path='/file/records' component={Records} />
</div>
</main>
...

有什么想法吗？

Answer 1

解决方案是在路由的渲染调用中包含基本模板：

<Route path='/dashboard' render={() => <Main><Dashboard /></Main>} />

React Router V4，在路由的第一个父节点下不匹配任何内容

1 个答案: