应用 umi 框架的约定路由
<Router>
<Route path="/charts/type" exact component={ChartTypeSelect} />
<Redirect exact from="/charts" to="/charts/type"/>
<Route path="/charts/data" exact component={ChartDimensionsInput}/>
<Route path="/charts/option" exact component={ChartOptionAdjust}/>
</Router>
引入组件,其余略 import {withRouter} from 'react-router-dom'
跳转:
this.props.history.push('/charts/data');
(前面 export 曾经应用了 withRouter)
发现地址栏地址发生变化,变为了 …/charts/data,但页面并没有渲染相应组件。
参考:
react-router@4.2.0 嵌套的路由用 this.props.history.push()路由扭转了然而页面却没更新
删掉外侧的 Router 标签
只保留 Route:
<Route path="/charts/type" exact component={ChartTypeSelect} />
<Redirect exact from="/charts" to="/charts/type"/>
<Route path="/charts/data" exact component={ChartDimensionsInput}/>
<Route path="/charts/option" exact component={ChartOptionAdjust}/>
胜利跳转