javascript - 在代码沙箱内路由，由于 withRouter 而失败

Question

当我点击提交按钮时，我需要重定向到这个页面 pageOne，所以我用谷歌搜索并找到了一个 react 路由器并使用了这一行 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.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 包装您的最外层组件，这样它将为其子组件提供所需的 Prop 和行为。

在您的 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'));

要在每个路由中渲染您的组件，请引用 react router documentation .