React Router：如何在所有路由上渲染元素，除了一個？

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>

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

如何阻止<div className="container">在"/"路由上呈現？ 我希望它在除"/"之外的所有其他路線上呈現。

我發現但不想使用的解決方案是在我的<Switch>呈現的每個組件中顯式插入帶有class="container"的元素。 有沒有更好的辦法？

Answer 1

您應該能夠通過嵌套路由和“無匹配路由”實現您的需求。

這個想法是通過嵌套路由將結構引入路由，以限制<div className="container">渲染為非/路由。

為此，您可以提取一個為路徑呈現<Route>的組件（即WithContainer ）； /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 2

使用最新版本的 React Router，您可以為path屬性提供一個字符串數組，以便特定路由在多個匹配項上呈現：

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

這是相關文檔的鏈接： https : //reacttraining.com/react-router/web/api/Route/path-string-string 。

Answer 3

如果你不想創建一個單獨的組件，你可以這樣做。 如果您想保留原始功能，您還需要保留內部開關。

// 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 組件。 您可以任意嵌套它們。

React Router：如何在所有路由上渲染元素，除了一個？

問題描述

3 個解決方案

解決方案1
6 已采納 2019-06-21 10:09:43

解決方案2
4 2019-06-21 10:26:53

解決方案3
2 2020-02-18 05:55:33

React Router：如何在所有路由上渲染元素，除了一個？

問題描述

3 個解決方案

解決方案1 6 已采納 2019-06-21 10:09:43

解決方案2 4 2019-06-21 10:26:53

解決方案3 2 2020-02-18 05:55:33

解決方案1
6 已采納 2019-06-21 10:09:43

解決方案2
4 2019-06-21 10:26:53

解決方案3
2 2020-02-18 05:55:33