Nested routes in React with params

Question

So I have been building a free application portal for students and so far I have set up a projects list page where on clicking on one of the projects you're redirected to the project details page at the bottom of which there is an Apply button which will be redirected to a typical Application page for that project. This is how I've set up my routes

{
      path: "/Projects/All",
      exact: true,
      component: <ProjectComponent/>
  },
{
    path: "/Projects/:project_uid",
    component: <ProjectDetail/>
  },
  {
    path: "/Projects/Apply/:project_uid",
    component: <Application />
  },

When we click on the Apply button on the ProductDetail page the URL changes but it is not redirected to the Application page. The value of console.log("props", props.match.params.project_uid); changes from props e50ffdfaad1c4de31d6ad5e82d789c6a to props Apply which might be the reason for this to fail.

Could it be that the props were passed down from the <ProjectComponent/> to the <ProjectDetail/> but it not go any further to the <Application> component. Is there a more efficient way to design routing in such cases?

Answer 1

The issue seems to be that react-router tries to match the first url , It will treat Apply as project_uid

{
      path: "/Projects/All",
      exact: true,
      component: <ProjectComponent/>
  },
{
    path: "/Projects/:project_uid",
    component: <ProjectDetail/>
  },
  {
    path: "/Projects/Apply/:project_uid",
    component: <Application />
  },

It might be solved by moving Application component up

{
      path: "/Projects/All",
      exact: true,
      component: <ProjectComponent/>
  },
{
    path: "/Projects/Apply/:project_uid",
    component: <Application />
  },
{
    path: "/Projects/:project_uid",
    component: <ProjectDetail/>
  },
  

But not a good practice to name url like that , it will be better if it is like

/Projects/:project_uid -> /Projects/Detail/:project_uid

/Projects/Apply/:project_uid -> /Projects/Application/:project_uid