маршрутизация внутри песочницы кода, сбой из-за withRouter

Question

Когда я нажимаю кнопку отправки, мне нужно перенаправить на эту страницу pageOne, поэтому я гуглил и нашел реактивный маршрутизатор и использовал эту строку this.props.history.push("/anotherPage");, но она не перенаправляет. Его выдача ошибки Инвариант не удался: You should not use <Route> outside a <Router> Можете ли вы сказать мне, как это исправить. Ниже приведен фрагмент кода и песочница.

https://codesandbox.io/s/material-demo-n9o7s

<!-- language-all: lang-or-tag-here -->

anotherPage = () => {
  console.log("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));

Answer 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'));

Чтобы отобразить компоненты внутри каждого маршрута, см. Документация по реагирующему маршрутизатору .