Question 262554 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – react-router-dom displays blank page for routes with more than one path segment "/"

Any time I create a route with more than one "/" (i.e. "/testing/test") react just returns a blank page when it should return the Test component as well as the navigation bar and footer. In the example below the route "/testing" works as expected but "/testing/test" does not.

Here is my router:

<UserProvider>
  <BrowserRouter>
    <Navbar />
    <Routes>
      <Route path="/">
        <Route index element={<Grid />} />
        <Route path="testing">
          <Route index element={<Test />} />
          <Route path="/test" element={<Test />} />
        </Route>
        <Route path="*" element={<Error />} />
      </Route>
    </Routes>
    <Footer
      legal={threat_intel.bottom_disclaimer}
      lastUpdate={threat_intel["Data Last Update"]}
    />
  </BrowserRouter>
  <ToastContainer />
</UserProvider >
  • React – v18.2.0
  • react-router-dom – v6.16.0
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This ended up being a completely separate issue.Wrapped around my router I had an if statement that was returning false when I assumed it was returning true. I probably should have included that in my code block. But I was fetching a .json file with data in it and was using a relative path so when my url was "/testing/test" it was looking for the file under "/testing/{filename.json}"


  2. 0

    You are rendering a nested route with an invalid absolute path. It produces the following error:

    Error

    Absolute route path "/test" nested under path "/testing" is not valid.
    An absolute child route path must start with the combined path of all
    its parent routes.

    Either fully quantify the route path, e.g. <Route path="/testing/test" element={<Test />} /> or use a relative path, e.g. <Route path="test" element={<Test />} />.

    Using relative paths is easier to read when nesting routes.

    <UserProvider>
  <BrowserRouter>
    <Navbar />
    <Routes>
      <Route path="/">
        <Route index element={<Grid />} />         // "/"
        <Route path="testing">
          <Route index element={<Test />} />       // "/testing"
          <Route path="test" element={<Test />} /> // "/testing/test"
        </Route>
        <Route path="*" element={<Error />} />
      </Route>
    </Routes>
    <Footer
      legal={threat_intel.bottom_disclaimer}
      lastUpdate={threat_intel["Data Last Update"]}
    />
  </BrowserRouter>
  <ToastContainer />
</UserProvider>

    Edit react-router-dom-displays-blank-page-for-routes-with-more-than-one-path-segment

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search