Question

我有这样的HTML结构：

<body>
  <nav>
     <!--navigation elements -->
  </nav>
  <div className='main'>
     <!--other elements -->
  </div>
  <div className='container'></div>
</body>

路由定义如下：

<Router>
  <Fragment>
    <Navbar />
    <Route exact path="/" component={Landing} />
    <div className="container">
       <Alert />
       <Switch>
           <Route exact path="/register" component={Register} />
           <Route exact path="/login" component={Login} />
           <Route exact path="/profiles" component={Profiles} />
       </Switch>
    </div>
  </Fragment>
</Router>

所有路径上都存在“ container”元素，但是我不希望在“ /”路径上呈现它。

如何阻止<div className="container">在"/"路线上呈现？我希望在"/"以外的所有其他路径上渲染它。

我发现但不想使用的一种解决方案是在class="container"中呈现的每个组件中显式插入带有<Switch>的元素。有更好的方法吗？

Answer 1

如果您不想创建单独的组件，则可以执行此操作。如果要保留原始功能，则还需要保留内部开关。

// parent switch
<Switch>
  <Route exact path="/" component={Landing} />
  // start route wrap!!!
  <Route> 
    <div className="container">
      <Switch>
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/profiles" component={Profiles} />
      </Switch>
    </div>
  </Route>
 // end route wrap!!!
</Switch>

您应该将Routes视为任何其他UI组件。您可以任意嵌套它们。

Answer 2

您应该能够通过nested routes和"no match route"来达到自己的要求。

该想法是通过嵌套路由将结构引入您的路由，以将<div className="container">的呈现限制为非/路由。

为此，您可以提取一个为路径渲染WithContainer的组件（即<Route>）； /register内部的/login，/profiles和<div className="container">。然后，您需要更改<Switch>，以针对以下路线案例渲染两条路线；

一个<Route/>，该元素将Landing的精确匹配呈现为/
一个<Route/>，它可以在没有特定路线（即与WithContainer不完全匹配的任何路径）上呈现新的/组件

通过以这种方式使用<Switch>，它会导致路由行为根据第一个匹配的路由呈现Landing或WithContainer（但不能同时呈现）。我们利用这种行为来限制对“非WithContainer”路由的<div className="container">（以及/元素）的呈现。

在代码中，这种方法可以表示为：

const WithContainer = () => (
    <div className="container">
       { /* Wrap routes in container div */ }
       <Route exact path="/register" component={Register} />
       <Route exact path="/login" component={Login} />
       <Route exact path="/profiles" component={Profiles} />
    </div>)

const Main = () => (
  <main> 
    <Switch>
      <Route exact path='/' component={Landing}/>
      <Route component={ WithContainer } /> {/* No match route */ }
    </Switch>
  </main>
)

希望有帮助！

Answer 3

使用最新版本的React Router，您可以为path道具提供字符串数组，以便在多个匹配项上呈现特定的路线：

<Route path={['/one', '/two', '/three']} component={SomeComponent} />

以下是相关文档的链接：https://reacttraining.com/react-router/web/api/Route/path-string-string。

React Router：如何在除一条之外的所有路径上渲染元素？

3 个答案: