直接到基地嵌套反应路线

Question

我需要一个指向基本嵌套路由的链接，例如，我在仪表板UI中有一个URL "app/ dashboard“--我希望有一个链接--它将指向基本嵌套URL，即”app/仪表板“。当我在' to‘属性中使用"/“时，它会将我指向根基，即"app”。

Index.js

<Routes>
    <Route path="/" element={<App />}>
      <Route path="register" element={<Register />} />  
    </Route>
    <Route path="dashboard" element={<Dashboard />}>
      <Route index element={<Home />} />
      <Route path="upload-reciept" element={<UploadReciept />} />
      <Route path="upload-details" element={<UploadDetails />} />
    </Route> 
</Routes>

Dashboard.js

<ul className="space-y-2">
   <li>
      <NavLink to="/" className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700"}>
         <HomeIcon className="h-5 w-5 sm:h-6 sm:w-6"/>
         <span>Home</span>
      </NavLink>
   </li>
   <li>
      <NavLink to="upload-reciept"  className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700"}>
         <CloudUploadIcon className="h-5 w-5 sm:h-6 sm:w-6"/>    
         <span>Upload reciept</span>
      </NavLink>
   </li>
   <li>
      <NavLink to="upload-details"  className={({ isActive }) => isActive ? "bg-sky-200 text-sky-700" : "hover:bg-sky-200 hover:text-sky-700"}>
         <RefreshIcon className="h-5 w-5 sm:h-6 sm:w-6" />
         <span>Update details</span>
      </NavLink>
   </li>
</ul>

如何指导"Home“链接到"app/dashboard"？

Answer 1

使用"."作为链接目标，以当前的“目录”路径"/dashboard"为目标。为这个链接添加end支柱，这样只有当路径以链接的目标路径(即"/dashboard" )结束时，它才是活动的。

<NavLink
  to="."
  end // <-- to match path "/dashboard"
  className={({ isActive }) =>
    isActive
      ? "bg-sky-200 text-sky-700"
      : "hover:bg-sky-200 hover:text-sky-700"
  }
>
  <HomeIcon className="h-5 w-5 sm:h-6 sm:w-6" />
  <span>Home</span>
</NavLink>

​

​

Answer 2

您没有定义/app路由，您必须在第一步定义嵌套路由，如下所示

    <Routes>
         <Route to="/app" element={<App/>}>
         <Route to="dashboard" element={<Dashboard/>}>
              //other <Route/>
         </Route>
       </Route>
    <Routes>

或者您可以使用旧的方法(在v6之前)，甚至可以将路由定义为硬代码，并定义正确的路由来做出反应，比如：<Route to="/where/ever/you/want" {...props} />用于其他事情，检查react router的文档，它非常容易，古德勒克，伙计！