React-Router useHistory() во вложенном функциональном компоненте
У меня возникла проблема с запуском хука useHistory() в моем приложении. Это работает в дочерних элементах верхнего уровня <Route>, но в любом компоненте, включенном в этот дочерний элемент верхнего уровня, он не работает.
Лучше объяснить с кодом.
В контейнере Frame:
const { path } = useRouteMatch();
<Switch>
<Route path = {`${path}/reading`} exact>
<Reading />
</Route>
</Switch>
В компоненте Reading:
export default function Reading(props) {
const history = useHistory();
// history is correct here and contains the pop(), push(), etc.
return (
<>
<Navbar />
</>
);
}
В компоненте Navbar:
export default function Navbar(props) {
let history = useHistory();
// history is undefined here - WHY??
return (
// navbar JSX code here
);
}
Почему useHistory() не работает в компоненте Navbar? Мне кажется неправильным, что только дети верхнего уровня могут использовать этот хук, он должен быть доступен по цепочке, верно?
Ответы 2
useHistory не работает в компоненте, который не находится внутри Route. Так что используйте withRouter в компоненте навигационной панели.
import {withRouter} from "react-router-dom";
const Navbar=(props)=> {
let history = useHistory();
// history is undefined here - WHY??
return (
// navbar JSX code here
);
}
export default withRouter(Navbar)
Я понял это, надеюсь, это поможет кому-то еще. В моем проекте используется папка /app, а также папка /common для вещей, каждая из которых имеет свой собственный файл package.json. Панель навигации находилась в папке /common, а остальные файлы — в папке /app.
Что делает react-router-dom, так это сохраняет информацию об истории в собственном файле в папке /node_modules, а не где-либо в вашем приложении React. Итак, поскольку у меня было два файла package.json, у меня было две папки /node_modules, и поэтому панель навигации искала несуществующую историю, потому что она находилась в другой папке /node_modules.
Это не компилируется. В нем говорится, что вы не можете использовать withRouter() вне маршрута