Nested React Router Rendering

Question

React Router 6 seems to be rendering only the customerdashboard and staffdashboard components when http://{{server}}/user/staff is run. Even if I manually changed the endpoint to the other child elemetns there is no change in what is rendered.

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route index element={<SignIn />} />
          <Route path="/register" element={<SignUp />} />
          <Route path="/user" element={<User />}>
            <Route path="customer" element={<CustomerPortal />}>
              <Route path="dashboard" element={<CustomerDashBoard />} />
              <Route path="account" element={<CmAccountMgmt />} />
            </Route>
            <Route path="staff" element={<StaffPortal />}>
              <Route path="dashboard" element={<StaffDashBoard />} />
              <Route path="members" element={<MemberDisplay />} />
              <Route path="revenue" element={<StaffRevenue />} />
              <Route path="employee" element={<StaffEmployee />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

I have used a nested React Router 6 in order to specifically render components based on my use case. I am expecting it to render the specific components based on the use case of the user. If the user is a staff I want the user to be able to render the staff elements and if the user is both then I want the user access to all the elements. I have not done the backend for auth yet, but I need the routes to work so that I can build out the site and prepare it for the backend auth logic.

Answer 1

I solution was to add from react-router-dom into each of the parent element. That will render all the children elements defined in App.jsx.