Issue with react-router-dom (Route in Routes)

I have this routes

  <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/payment" element={<PaymentStatusPage />} />
          <Route path="/*" element={<Error404 />} />
        </Routes>
        {/* DOCS */}
        <div className="max-[1800px]:w-[80vw] max-w-[1440px] w-[100vw] py-12 mx-auto">
         <Routes>
          <Route path="docs/" element={<DocsHomePage />} />
          <Route path="docs/developer" element={<DocsDeveloperPage />} />
          <Route path="docs/customer" element={<DocsCustomerPage />} />
          <Route path="docs/customer/how-to-install-metamask" element={<HowInstallMetamask />} />
        </Routes>
        </div>

  <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/payment" element={<PaymentStatusPage />} />
          <Route path="/*" element={<Error404 />} />
        </Routes>
        {/* DOCS */}
        <div className="max-[1800px]:w-[80vw] max-w-[1440px] w-[100vw] py-12 mx-auto">
         <Routes>
          <Route path="docs/" element={<DocsHomePage />} />
          <Route path="docs/developer" element={<DocsDeveloperPage />} />
          <Route path="docs/customer" element={<DocsCustomerPage />} />
          <Route path="docs/customer/how-to-install-metamask" element={<HowInstallMetamask />} />
        </Routes>
        </div>

for all routes in docs I have container but if I go to the /docs ( for example) I see this How can I display only /docs component without error? (I still want to keep container) If you know how it possible to do it with next - write about it

2 Replies

Tenkes•14mo ago

Haven't used react routes in a while but I think you would do something like this:

  <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/payment" element={<PaymentStatusPage />} />
          <Route path="/*" element={<Error404 />} />
        </Routes>
        
          <Route path="/docs" element={<DocsHomePage />} >
          <Route path="/developer" element={<DocsDeveloperPage />} />
          <Route path="/customer" element={<DocsCustomerPage />} >
          <Route path="/how-to-install-metamask" element={<HowInstallMetamask />} />
<Route>
        </Route>
        </Routes>

  <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/payment" element={<PaymentStatusPage />} />
          <Route path="/*" element={<Error404 />} />
        </Routes>
        
          <Route path="/docs" element={<DocsHomePage />} >
          <Route path="/developer" element={<DocsDeveloperPage />} />
          <Route path="/customer" element={<DocsCustomerPage />} >
          <Route path="/how-to-install-metamask" element={<HowInstallMetamask />} />
<Route>
        </Route>
        </Routes>

I typed this on my phone so there could be some type errors

Nikita•14mo ago

I don't understand your changes I want keep docs routes in container Answered by Paul Chin Jr. You are encountering this issue because of the order and structure of your routes. When the router encounters a URL, it tries to match it with the first <Route> that fits. In your case, the catch-all route /* for <Error404 /> is being matched before the /docs routes get a chance. To fix this, you should nest your routes appropriately. Here's a way to structure your routes to avoid this problem:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<Register />} />
  <Route path="/payment" element={<PaymentStatusPage />} />

  {/* Nested route for docs */}
  <Route path="docs" element={<div className="max-[1800px]:w-[80vw] max-w-[1440px] w-[100vw] py-12 mx-auto">
    <Routes>
      <Route index element={<DocsHomePage />} /> {/* This will be the default for /docs */}
      <Route path="developer" element={<DocsDeveloperPage />} />
      <Route path="customer" element={<DocsCustomerPage />} />
      <Route path="customer/how-to-install-metamask" element={<HowInstallMetamask />} />
    </Routes>
  </div>} />

  {/* This should be the last route */}
  <Route path="/*" element={<Error404 />} />
</Routes>

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<Register />} />
  <Route path="/payment" element={<PaymentStatusPage />} />

  {/* Nested route for docs */}
  <Route path="docs" element={<div className="max-[1800px]:w-[80vw] max-w-[1440px] w-[100vw] py-12 mx-auto">
    <Routes>
      <Route index element={<DocsHomePage />} /> {/* This will be the default for /docs */}
      <Route path="developer" element={<DocsDeveloperPage />} />
      <Route path="customer" element={<DocsCustomerPage />} />
      <Route path="customer/how-to-install-metamask" element={<HowInstallMetamask />} />
    </Routes>
  </div>} />

  {/* This should be the last route */}
  <Route path="/*" element={<Error404 />} />
</Routes>

With the above structure, when you visit /docs, the router will match the /docs route and then, because of the nested <Routes>, it will match the index route inside, displaying the <DocsHomePage /> component. Regarding Next.js: Next.js handles routing differently, based on the file system. For the scenario you described, you would have: A pages directory with: index.js (for <HomePage />) login.js (for <Login />) register.js (for <Register />) payment.js (for <PaymentStatusPage />) A docs directory inside pages with: index.js (for <DocsHomePage />) developer.js (for <DocsDeveloperPage />) A customer directory inside docs with: index.js (for <DocsCustomerPage />) how-to-install-metamask.js (for <HowInstallMetamask />) _error.js to customize the error page To add a container for all the docs routes in Next.js, you'd usually use a _app.js file in the pages directory, and conditionally add the container for routes that match the /docs path.

Gaming

Programming

Issue with react-router-dom (Route in Routes)