React 中帶有參數的嵌套路由

Question

所以我一直在為學生建立一個免費的申請門戶，到目前為止我已經建立了一個項目列表頁面，點擊其中一個項目，你會被重定向到項目詳細信息頁面，底部有一個應用按鈕將被重定向到該項目的典型應用程序頁面。 這就是我設置路線的方式

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

當我們單擊ProductDetail頁面上的 Apply 按鈕時，URL 會更改，但不會重定向到Application頁面。 console.log("props", props.match.params.project_uid); 從props e50ffdfaad1c4de31d6ad5e82d789c6a更改為props Apply ，這可能是失敗的原因。

可能是 props 從<ProjectComponent/>傳遞到<ProjectDetail/>但它沒有進一步傳遞到<Application>組件。 在這種情況下，是否有更有效的方法來設計路由？

Answer 1

問題似乎是 react-router 嘗試匹配第一個 url ，它將 Apply 視為 project_uid

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

可以通過向上移動應用程序組件來解決

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

但是這樣命名 url 不是一個好習慣，如果它像這樣會更好

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

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