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

Question

I have an App main component with react router:

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

In main index.js I render that component:

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

Currently when I click on any link in navigation bar/route component linked in router is rendered right below the navigation bar in root div element. However I would like to render those components to mainpage div that is set below root div so navbar and rest of the page is clearly separated (placed in 2 different divs). Is there any way to do it?

Jap Mul Jap Mul · Accepted Answer · 2020-02-11T13:12:08

I wouldn't say it would be impossible to get the content in mainpage if that element is below the root element, but you would make it unnecessarily hard that way.

If the situation is just that you want to separate them into two different divs why don't you just wrap your switch in a div? That way every route will be rendered in the <div id='mainpage'> element.

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

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

1 Answers