Accepted answer
import React from 'react';
import { BrowserRouter} from 'react-router-dom';

export const App: React.FC = () => {

  return (
        // This sidebard will be rendered on each route, because it's outside of <BrowserRouter>
        <div className="sideBar">
              <li className="st-bottom-line">
                    <Link to="/Dashboard">Dashboard </Link>

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

        // This BrowserRouter will render the proper component based on the current URL (i.g. 'localhost:3000/Dashboard')
                  <Route path="/Dashboard" render={(props) => <Heading {...props} name={`Dashboard`} />} />
                  <Route path="/Configuration" render={(props) => <Heading {...props} name={`Configuration`} />} />

Related Query

More Query from same tag