直接到基础嵌套反应路线

Question

我需要一个 link 将我引导至基本嵌套路线，例如我在仪表板 UI 中有 URL“app/dashboard”我想要一个 link，它将引导我到嵌套的基础 URL，即“app/dashboard”。当我在 '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>

如何将“主页”link 指向“app/dashboard”？

Answer 1

使用"." 作为link 目标来定位当前“目录”路径"/dashboard"。为此 link 添加 end 道具，因此它仅在路径以 link 所定位的路径结束时才处于活动状态，即 "/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-dom 的文档这很容易祝你好运！！！

直接到基础嵌套反应路线

Direct to base nested react route

javascript

reactjs

react-router

react-router-dom