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

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.

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;