javascript - React Router : How to render element on all routes, 除了一个？-6ren

javascript - React Router : How to render element on all routes, 除了一个？

转载作者：行者123 更新时间：2023-11-28 14:09:47

我有这样的 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>

“容器”元素出现在所有路由上，但我不希望它在“/”路由上呈现。

我怎样才能停止<div className="container">从在 "/" 上呈现路线？我希望它在除 "/" 之外的所有其他路线上呈现.

我找到但不想使用的解决方案是显式插入带有 class="container" 的元素在我的 <Switch> 中呈现的每个组件中.有没有更好的办法？

最佳答案

您应该能够通过 nested routes 实现您的要求和一个 "no match route" .

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

为此，您可以提取一个呈现 WithContainer 的组件(即 <Route>)对于路径； /register , /login和 /profiles , 在 <div className="container"> 里面.然后你会改变你的 <Switch>现在为以下路由案例呈现两条路由；

A <Route/>呈现 Landing与 / 完全匹配的组件
A <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>
)

希望对您有所帮助!

关于javascript - React Router : How to render element on all routes, 除了一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56700735/

文章推荐： html - 在 GWT 中加载图像

文章推荐： javascript - 如何标记浏览器滚动条？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - React Router : How to render element on all routes, 除了一个？