Маршрутизация внутри песочницы кода, сбой из-за withRouter
Когда я нажимаю кнопку отправки, мне нужно перенаправить на эту страницу pageOne, поэтому я погуглил, нашел реагирующий маршрутизатор и использовал эту строку this.props.history.push("/anotherPage");, но это не перенаправление.
Выдает ошибку Invariant failed: You should not use <Route> outside a <Router>
Можете ли вы сказать мне, как это исправить?
Предоставление моего фрагмента кода и песочницы ниже.
https://codesandbox.io/s/material-demo-n9o7s
<!-- language-all: lang-or-tag-here -->
anotherPage = () => {
console.info("redictToStepper --->");
this.props.history.push("/anotherPage");
};
render() {
const { classes } = this.props;
const { checkBoxvalues } = this.state;
return (
<div className = {classes.root}>increase when I hit submit button</div>
);
}
export default withRouter(withStyles(styles)(RadioButtonsGroup));
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно обернуть самый внешний компонент с помощью BrowserRouter, чтобы он предоставил необходимые реквизиты и поведение своим дочерним элементам.
На вашем index.js замените ваш рендер на:
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<Route exact path = "/" component = {Demo} />
<Route exact path = "/anotherPage" component = {PageOne} />
</BrowserRouter>, document.querySelector('#root'));
Чтобы отобразить ваши компоненты внутри каждого маршрута, обратитесь к документация по реактивному маршрутизатору.
эй, спасибо за ваш ответ ... Я обновил код, но по-прежнему не показывает div на другой странице. Можете ли вы сказать мне, как это исправить codeandbox.io/s/material-demo-n9o7s
Вам нужно иметь <Route /> для каждого маршрута, который вы хотите загрузить, и передать, какой компонент должен быть отрисован через реквизит. Пожалуйста, обратитесь к redux.js.org/advanced/использование-с-реагированием-маршрутизатором, чтобы узнать об этом, stackoverflow следует использовать для устранения точечных сомнений и проблем, здесь вас этому не научат.
Эй, я обновил код с помощью Route, но он все еще не работает... не могли бы вы рассказать мне, как это исправить <Route exact path = "/pageOne" component = {PageOne} /> предоставив мою песочницу здесь codeandbox.io/s/material-demo-n9o7s
<BrowserRouter> <Route точного пути = "/" component = {Demo} /> <Route точного пути = "/anotherPage" component = {PageOne} /> </BrowserRouter> Это позволит вам отображать разные компоненты для разных маршрутов . Пожалуйста, если на первоначальный вопрос уже дан ответ, примите его. Для получения дополнительной информации о маршрутах обратитесь к их документации, это довольно хорошо.
Вам нужен компонент <Router>, но я также думаю, что вы используете withRouter слишком высоко в своем приложении. Абстрагируйте форму в демо на другой компонент и стройте маршруты на уровне демо. Посмотрите образец на reacttraining.com/react-router/web/guides/quick-start