Question 73096 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React Router DOM component not displayed when navigating to path – Reactjs

I have a react project where I make use of React Router DOM to render different pages based on the visited URL.

All of the components render properly when I navigate to their respective URLs, except the Account component (when navigating to /admin/dashboard/table).

My routes are:

<Route path="/admin" element={<AdminLayout />}>
    <Route index path="home" element={<AdminHome />} />
    <Route path="dashboard" element={<Dashboard />}>
        <Route path="table" element={<Account />} />
    </Route>
</Route>

The Link to the /admin/dashboard/table URL is here:

<CardActionArea component={Link} to="table">
    <CardMedia
      component="img"
      height="300"
      image={cardImage}
      alt="green iguana"
    />

When clicking on the link, I successfully navigate to /admin/dashboard/table, but I do not understand why the Account component is not rendering when navigating to the URL.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found my error.

    The Account page rendered properly, but because I nested it under the dashboard Route, it was not visible, due to the Dashboard component being on top of it.

    I just had to edit my Routes as follows:

    <Route path="/admin" element={<AdminLayout />}>
    <Route index path="home" element={<AdminHome />} />
    <Route path="dashboard" element={<Dashboard />} />
    <Route path="dashboard/table" element={<Account />} />
</Route>

  2. 0

    If you mean for the Account component to be rendered on nested route "/admin/dashboard/table" then the DashBoard component necessarily needs to render an Outlet component for the nested routes similar to what AdminLayout does.

    Example:

    const Dashboard = () => {
  ...

  return (
    ...

    <Outlet />

    ...
  );
};

    <Route path="/admin" element={<AdminLayout />}>
  <Route index path="home" element={<AdminHome />} />
  <Route path="dashboard" element={<Dashboard />}>
    <Route path="table" element={<Account />} />
  </Route>
</Route>

    This of course means that the Dashboard UI will be rendered at the same time as any of its nested route content.

    If you meant for the Account component to be rendered discretely on it’s own then you’ll not want to nest it as a child of Dashboard, but rather as a sibling route.

    Examples:

    <Route path="/admin" element={<AdminLayout />}>
  <Route index path="home" element={<AdminHome />} />
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="dashboard/table" element={<Account />} />
</Route>

    <Route path="/admin" element={<AdminLayout />}>
  <Route index path="home" element={<AdminHome />} />
  <Route path="dashboard">
    <Route index element={<Dashboard />} />
    <Route path="table" element={<Account />} />
  </Route>
</Route>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search