React Router multiple Routes

Question

Hello I'm trying to do multiple routes with the react router, but without success basically i have a layout that will have different content and also a dashboard with different contents, but without success

const HomeContent = () => {
  return (
    <div style={{ background: 'red', width: '100%', height: '400px' }}>
      Home
    </div>
  );
};

const AboutContent = () => {
  return (
    <div style={{ background: 'blue', width: '100%', height: '400px' }}>
      About
    </div>
  );
};

const DashBoardNav = () => {
  return (
    <div style={{ background: 'red', width: '100%', height: '400px' }}>
      DashBoardNav
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </div>
  );
};
const MainRoutes = () => {
  const dispatch = useDispatch();
  const { popUpIsOpen } = useSelector(RootState => RootState.togglePopUp);
  const { sideIsOpen } = useSelector(RootState => RootState.toggleSide);
  return (
    <GlobalContainer>
      <GlobalStyle />
      <Overlay
        onClick={() =>
          popUpIsOpen ? dispatch(toggle()) : dispatch(toggleSide())
        }
        pop={popUpIsOpen ? popUpIsOpen : sideIsOpen}
      />
      <Routes>
        <Route path="/" element={<Header />} />
        <Route path="dashboard" element={<DashBoardNav />} />
      </Routes>
      <Content>
        <Routes>
          <Route exact path="/" element={<HomeContent />}>
            <Route path="about" element={<AboutContent />} />
          </Route>
          <Route path="dashboard" element={<> DashBoard </>}>
            <Route path="about" element={<> about </>} />
          </Route>
        </Routes>
      </Content>

      <Footer />
    </GlobalContainer>
  );
};

export default MainRoutes;

But I am getting the following error my navbar renders normal in my "/", and my Home component like this:

And when I try to enter my "/ about" path, my navbar does not appear and my div ABOUT (component: AboutContent) neither:

Basically I need multiple routes

where I have two navbars (one is from the lading page and others, and one from the dashboard)

equally with the content

Answer 1

Since react router v4 you don't nest routes instead you keep them inside a component. here is a basic example for the same purpose you are trying to achieve.

Answer 2

Looks like there are a couple problems here, including path attributes and nested Route components.

I find it easier to read the code when wrapping Routes in a Switch so that it's explicit that only one of the Route components will be rendered.

Here's a full example (removed some of the other code not relevant to the problem):

const MainRoutes = () => {
  return (
    <GlobalContainer>
      <Switch>
        <Route exact path="/">
          <Header/>
        </Route>

        <Route path="/dashboard">
          <DashBoardNav/>
        </Route>
      </Switch>

      <Content>
        <Switch>
          <Route exact path="/">
            <HomeContent/>
          </Route>

          <Route path="/about">
            <AboutContent/>
          </Route>
        </Switch>
      </Content>

      <Footer />
    </GlobalContainer>
  );
};

Answer 3

<Switch>
  <Route exact path="/" element={<HomeContent />} />
  <Route path="/about" element={<AboutContent />} />
  <Route path="/dashboard" element={<DashBoardNav />} />
</Switch>

This can resolve your issue. Basically switch is used to switch one or more components. so you need to pass exact component path which can refer to exact that specific component only.

For more details, Request you to refer my gist link.