当我点击“提交”按钮时,我需要重定向到此页面pageOne,因此我用Google搜索并找到了一个反应路由器,并使用了这行this.props.history.push("/anotherPage");
,但未重定向。
它抛出错误Invariant失败: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));
答案 0 :(得分: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'));
要在每个路径中渲染组件,请参阅react router documentation。