Реагировать - получить параметры из пути маршрута в другом компоненте
Я пытался найти его, но не смог. Я проверил множество результатов, но эффект был разочаровывающим.
Итак, у меня есть такая структура приложения:
<BrowserRouter>
<Menu/>
<Routes>
<Route path = "/business/:id" element = {<SomePage />} />
</Routes>
</BrowserRouter>
В компоненте SomePage я могу использовать useParams и вижу этот id как объект { id: 6 } — это нормально и имеет смысл. Но у меня есть случай, когда мне нужно извлечь этот идентификатор в компоненте Menu и useParams возвращает:
{
*: "business/6"
}
Но я хотел бы получить объект:
{
id: 6
}
Я пробовал использовать matchPath, useMatch, useResolvedPath и другие, но особых эффектов не было.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам нужно использовать useParams из документации.
Согласно официальной документации маршрутизатора React, крючок useParams может получить доступ только к параметрам Route внутри Routes компонента. Проблема в том, что компонент Menu находится за пределами компонента Routes.
просто оберните компонент <Menu />, как показано ниже, и попробуйте.
<Routes>
<Route path = "/business/:id" element = {<SomePage />} />
<Route element = {<Menu />} />
</Routes>
также см: Получите идентификатор, используя крючок useParams в функциональном компоненте - React Router dom v6
Если вы рендерите Menu вне компонента Routes, используйте крючок useMatch, чтобы проверить, есть ли совпадение с путем "/business/:id". Если совпадение есть, то useMatch возвращает объект Match, имеющий свойство params, в противном случае он возвращает значение null (поэтому используйте предложение защиты или проверку нуля перед доступом к возвращаемому значению).
Альтернативно вы можете создать компонент маршрута макета, который отображает Menu вместе с Outlet, визуализировать его внутри компонента Routes и использовать крючок useParams для доступа к объекту params.
Пример:
import { Routes, Route, Outlet, useParams, useMatch } from "react-router-dom";
const MenuStandalone = () => {
const match = useMatch("/business/:id");
console.info("MenuStandalone", match?.params);
return (
<>
<h1>MenuStandalone</h1>
<Outlet />
</>
);
};
const MenuLayout = () => {
const params = useParams();
console.info("MenuLayout", params);
return (
<>
<h1>MenuLayout</h1>
<Outlet />
</>
);
};
const SomePage = () => {
const params = useParams();
console.info("SomePage", params);
return <h1>SomePage</h1>;
};
export default function App() {
return (
<div className = "App">
<MenuStandalone />
<Routes>
<Route element = {<MenuLayout />}>
<Route path = "/business/:id" element = {<SomePage />} />
</Route>
</Routes>
</div>
);
}
Спасибо. Ваш ответ имеет смысл. Я боялся, что у меня возникнут проблемы с доступом к useParams компонентам за пределами <Routes>. Проблема с useMatch заключается в том, что мне нужно знать текущий путь, чтобы найти это id, но оно также работает с регулярным выражением: useMatch("/business/:id/*"), так что для /business/6/settings => {*: '/settings', id: "6"} это подойдет.
matchPathдолжно работать. Зачем вам нужны несвязанные параметры в меню?