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

Question

我有一个带有 React 路由器的 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>
  );
}

在 main index.js 中，我渲染了那个组件：

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

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

Answer 1

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

如果只是想将它们分成两个不同的 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>
  );
}

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

How to render component from React Route to a different div than root

reactjs

react-router

react-dom