如何将组件从 React Route 渲染到与 root 不同的 div

T4under4

我有一个带有反应路由器的应用程序主要组件：

function App() {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route path="/screenings" exact component={SPT} />
        <Route path="/registerpage" exact component={RegisterPage} />
        <Route path="/loginpage" exact component={LoginPage} />
        <Route path="/logout" exact component={LoginPage} />
      </Switch>
    </Router>
  );
}

在主 index.js 中，我渲染该组件：

ReactDOM.render(<App />, document.getElementById('root'));

目前，当我单击bar/route路由器中链接的导航组件中的任何链接时，它会呈现在rootdiv 元素中导航栏的正下方。但是，我想将这些组件呈现给mainpage设置在rootdiv下方的div，因此导航栏和页面的其余部分明显分开（放置在 2 个不同的 div 中）。有什么办法吗？

日穆

我不会说mainpage如果该元素低于该root元素就不可能获取内容，但是这样会使内容变得不必要地困难。

如果情况只是您想将它们分成两个不同的 div，为什么不将 switch 包装在一个 div 中？这样每条路线都将在<div id='mainpage'>元素中呈现。

function App() {
  return (
    <Router>
      <NavBar />
      <div id='mainpage'>
        <Switch>
          <Route path="/screenings" exact component={SPT} />
          <Route path="/registerpage" exact component={RegisterPage} />
          <Route path="/loginpage" exact component={LoginPage} />
          <Route path="/logout" exact component={LoginPage} />
        </Switch>
      </div>
    </Router>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。