score:2

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

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

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

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

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



Related Query

More Query from same tag