Прямой к базовому вложенному маршруту реагирования
Мне нужна ссылка, которая направит меня к базовому вложенному маршруту, например, у меня есть URL-адрес «приложение/панель инструментов» в пользовательском интерфейсе панели инструментов. Я хочу иметь ссылку, которая направит меня к базовому вложенному URL-адресу, который является «приложение /панель приборов". Когда я использую «/» в атрибуте «to», он направляет меня к корневой базе, которой является «приложение».
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>
Как мне направить ссылку «Главная» на «приложение/панель управления»?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Используйте "." в качестве цели ссылки для нацеливания на текущий путь «каталога» "/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>
@M_Magz О, тогда вам, вероятно, просто нужно использовать реквизит end на этой корневой ссылке на панель инструментов. Протестирована и обновлена песочница.
Где я могу найти документацию по «конечной» опоре?
@M_Magz NavLink Есть небольшая реклама: «Если используется конечная опора, она гарантирует, что этот компонент не сопоставляется как «активный», когда совпадают пути его потомков. Например, для отображения ссылки, которая активна только на веб-сайте. root, а не какие-либо другие URL-адреса, вы можете использовать: <NavLink to = "/" end>Home</NavLink>"
вы не определили маршрут /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
Это очень легко
удачи чувак!!!
ОП не сказал, что им нужен "/app" маршрут. Этот ответ не решает проблему OP с использованием ссылки для перехода к маршруту "/dashboard".
Это работает, однако "isActive" всегда верно. Даже если я нажал на другую ссылку.