时间戳

首页 > 解决方案 > 如何将 React Route 中的组件渲染到与 root 不同的 div

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

问题描述

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

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'));

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

标签： reactjsreact-routerreact-dom

解决方案

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

如果情况只是您想将它们分成两个不同的 div，为什么不将开关包装在一个 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>
  );
}

推荐阅读