Make the routes accessible to all the pages and components

i created a route inside app.js However im trying to make this route accessible to any other pages. I have code inside components/navbar.js. However whenever i click home or about the link is changing. but the right content or body is not changing . Can someone help me how to do it? Thank you.

This is the code:

https://codesandbox.io/s/compassionate-chaplygin-mj2p3

Answer

React Router v4 is used for the example in the official documentation.

https://github.com/trendmicro-frontend/react-sidenav#react-router-v4-with-react-v16

enter image description here

So that if you implement the Routing according to that example, use React Router v4, not v5. You can use v5 if you implement the Router in your application according to that version.

I have fixed all issues in your application using React Router DOM v4.

App.js

export default function App() {
  const [showNav, setShowNav] = useState(true);
  return (
    <>
      <Router>
      {/* Wrap all elements using Route render prop */}
        <Route
          render={({ location, history }) => (
            <>
              <header>
                <GiHamburgerMenu onClick={() => setShowNav(!showNav)} /> &emsp;
              </header>
              {/* Pass location & history props to Navbar */}
              <Navbar show={showNav} location={location} history={history} />
              <Route path="/" exact component={(props) => <Home />} />
              <Route path="/home" exact component={(props) => <Home />} />
              <Route path="/about" component={(props) => <About />} />
            </>
          )}
        />
      </Router>
    </>
  );
}

navbar.js

const Navbar = ({ show, location, history }) => {
  return (
    <React.Fragment>
      <SideNav
        onSelect={(selected) => {
          const to = "/" + selected;
          if (location.pathname !== to) {
            history.push(to);
          }
        }}
      >
        <SideNav.Toggle />
        <SideNav.Nav defaultSelected="home">
          <NavItem eventKey="home">
            <NavIcon>
              <i className="fa fa-fw fa-home" style={{ fontSize: "1.75em" }} />
            </NavIcon>
            <NavText>Home</NavText>
          </NavItem>
          <NavItem eventKey="about">
            <NavIcon>
              <i className="fa fa-fw fa-home" style={{ fontSize: "1.75em" }} />
            </NavIcon>
            <NavText>About</NavText>
          </NavItem>
        </SideNav.Nav>
      </SideNav>
      <main>
        {/* <Route path="/" exact component={(props) => <Home />} />
              <Route path="/home" exact component={(props) => <Home />} />
              <Route path="/about" component={(props) => <About />} /> */}
      </main>
    </React.Fragment>
  );
};

CodeSandbox – https://codesandbox.io/s/react-sidenav-with-react-router-dom-69039375-cpeur