React 逻辑式导航 的实现(不刷新路由跳转)

React 逻辑式导航

问题描述

React中的路由大多是用React-router来实现的。但是标签和 标签往往仅限于 声明式路由，即往往写在标签中，用于 主体界面之间的内容切换。如下所示：

<Router >
  <Switch>
    <Route exact path={"/"} component={Login} />
    <NavigationBar>
      <Switch>
        {pageList.map((item, index) => {
          return (
            <Route
              key={index}
              path={item.path}
              component={item.component}
            />
          );
        })}
      </Switch>
    </NavigationBar>
  </Switch>
</Router>

但是有时候在组件内部会涉及到组件之间的跳转，但是由于组件继承于父组件，往往会没有this.props.history这个属性，无法利用this.props.history.push进行跳转。

解决办法：

window.location.href

简单粗暴，但是页面会刷新。影响到数据的显示。

withRouter(this.props.history.push)

import { withRouter } from "react-router-dom";

class NavigationBar extends Component {
	// 在组件内的方法中就可以使用this.props.history.push进行路由跳转了，而且页面不会刷新
	...
}
// 将组件暴露出去的时候用withRouter包裹
export default withRouter(NavigationBar);