Load react component in a different div than the one containing its link

Question

I have a page with a header, footer and sidebar. The App.js file is as follows -

const App = () => {

        return(
                <React.Fragment>
                <div id="header">
                        <Header />
                </div>
                <BrowserRouter>
                <div className = "row">

                        <div className="col-2" id="sidebar">
                                <SideBar />
                        </div>
                        <div className="col-10" id="mainBody">
                        </div>

                </div>
                </BrowserRouter>

                <div id="footer">
                        <Footer />
                </div>
                </React.Fragment>

        );

};

export default App;

The SideBar.js file is as follows -

const SideBar = () => <div id="st-sidebar">
                        <BrowserRouter>
                        <ul id ="sidebar" className="nav nav-pills nav-stacked st-white-on-color">

                            <li className="st-bottom-line">
                                <Link to="/Dashboard">Dashboard </Link>
                            </li>

                            <li className="st-bottom-line">
                                <Link to='/Configuration'> Configuration </Link>
                            </li>

                        </ul>
                                <Route path="/Dashboard" component={Dashboard} />
                                <Route path="/Configuration" component={Configuration} />
                        </BrowserRouter>
                    </div>


export default SideBar;

When I click on either of the two links, they load in the sidebar itself. I want to load it in the div with ID = mainBody. How should I go about doing so? Where am I going wrong?

I'm new to ReactJS and have used the create-react-app.

score 1 · Accepted Answer · answered Dec 05 '19 at 10:33

Place your routes inside the main-body div, then you can use Link to navigate to that route. Your components will render where they are placed in the code

const App = () => {

        return(
                <React.Fragment>
                <div id="header">
                        <Header />
                </div>
                <BrowserRouter>
                <div className = "row">

                        <div className="col-2" id="sidebar">
                                <SideBar />
                        </div>
                        <div className="col-10" id="mainBody">
                         <Route path="/Dashboard" component={Dashboard} />
                         <Route path="/Configuration" component={Configuration} />
                        </div>

                </div>
                </BrowserRouter>

                <div id="footer">
                        <Footer />
                </div>
                </React.Fragment>

        );

};

export default App;

score 1 · Answer 2 · answered Dec 05 '19 at 10:44

So the links will be at the SideBar but the rendering should be in the mainbody, so you need to move the route code on to the main body div

         <div className="col-10" id="mainBody">
            main body below here only it should render
            <p>
              <Route path="/Dashboard" component={Dashboard} />
              <Route path="/Configuration" component={Configuration} />
            </p>
          </div>

Code

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";

import "./styles.css";

const Header = () => <>Header</>;

const SideBar = () => (
  <div id="st-sidebar">
    <BrowserRouter>
      <ul id="sidebar" className="nav nav-pills nav-stacked st-white-on-color">
        <li className="st-bottom-line">
          <Link to="/Dashboard">Dashboard </Link>
        </li>

        <li className="st-bottom-line">
          <Link to="/Configuration"> Configuration </Link>
        </li>
      </ul>
    </BrowserRouter>
  </div>
);

const Footer = () => <>Footer</>;
const Dashboard = () => <>Dashboard</>;

const Configuration = () => <>Configuration</>;

const App = () => {
  return (
    <React.Fragment>
      <div id="header">
        <Header />
      </div>
      <BrowserRouter>
        <div className="row">
          <div className="col-2" id="sidebar">
            <SideBar />
          </div>
          <div className="col-10" id="mainBody">
            main body below here only it should render
            <p>
              <Route path="/Dashboard" component={Dashboard} />
              <Route path="/Configuration" component={Configuration} />
            </p>
          </div>
        </div>
      </BrowserRouter>

      <div id="footer">
        <Footer />
      </div>
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working codepen

Load react component in a different div than the one containing its link

2 Answers2