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

【问题标题】：How to render component from React Route to a different div than root如何将 React Route 中的组件渲染到与 root 不同的 div
【发布时间】：2020-05-26 17:01:06
【问题描述】：

我有一个带有反应路由器的 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'));

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

【问题讨论】：

标签： reactjs react-router react-dom

【解决方案1】：

如果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>
  );
}

【讨论】：

这就是我要找的东西。非常感谢。