I’ve setup basic app navigation using a Material UI drawer and appbar and all listitems in the drawer properly change routes and display the corresponding component(s) as expected using React Router.

App.js

function App() {
  const location = useLocation();

  function showComponentByPath(){
    let path = location.pathname;
  
    if (path === "/") {
      return <ProjectDashboard />
    }
  }

  return (
    <>
      <NavMenu />
      {showComponentByPath()}
      <Outlet />
    </>  
)}

export default App

Main.js

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />} errorElement={<ErrorPage />}>
      <Route path="projects/:id" element={<ProjectDetails />} />
      <Route path="tasks" element={<MyTasksView />} />
      <Route path="reviewtasks" element={<ReviewTasks />} />
      <Route path="myapplications" element={<MyApplications />} />
      <Route path="peerreviews" element={<PeerReviews />} />
      <Route path="reviewapplications" element={<ReviewApplication />} />
    </Route>
  ),
)

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <RouterProvider router={router} />
    </LocalizationProvider>
  </StrictMode>,
)

ProjectDetails.jsx

function ProjectDetails() {
  console.log("I'm the ProjectDetails component");

  <div>
    <h1>
      Project Details
    </h1>
  </div>
}

export default ProjectDetails

The issue comes in when I try using the tablecell as a link to a nested route (i.e. projects/1). When I do this, the tablecell link and route both work as expected but the contents of the component are not being displayed — despite the component being rendered as evident by a console.log being printed when the component is mounted.

TableCell Link Attempts

Below are the two ways that I’ve tried linking the tablecell to the desired path (i.e. “projects/:id). These both update the route as expected but the component’s contents are not displayed so I wanted to include these to provide more context.

I’m also not using these both at the same time but just wanted to show the approaches I’ve taken.

<TableCell component={Link} to={"projects/1"}>{row.project_name}</TableCell>
<TableCell><Link to="projects/1">{row.project_name}</Link></TableCell>

Questions that might be helpful for myself or others looking at this example:

• Have I setup or configured something wrong with React Router?
• Could there be a state/rendering issue with how I’m trying to display my component(s)?

I’ll provide as many screenshots as possible to help anyone else setting up React Router V6 here as well.