react-router-dom 4.x版本无法使用js实现路由跳转

Question

需求编写通用得js方法完成路由跳转

1:react-router-dom 无法使用js跳转方式完成跳转。

废话不多说，直接少代码.

首先是 app.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom'
import './App.scss';
import routes from '../../routers/index'
import '../../assets/js//public.js'
class App extends Component {
  render() {
    return (
      <div className="App" >
        <Router>
            <Switch>
              {routes.map((route,index)  => (
                   <Route
                   key={index}
                   path={route.path}
                   component={route.component}
                 />  
                ))}
            </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

第二个是router.js

import index from '../components/pages/index/index'
import aboutUs from '../components/pages/aboutUs/index'
import help from '../components/pages/help/index'
const routes = [
  {
    path: "/aboutUs",
    name:"aboutUs",
    component: aboutUs,
  },{
    path: "/help",
    name:"help",
    component: help,
  },

    {
      path: "/",
      name:"index",
      component: index,
    }
  ];
  export default routes;

第三个是通用导航栏
header组件

import React,{Component} from 'react';
import './index.scss'
import  { createBrowserHistory } from 'history';
const history = createBrowserHistory();
const images={
    'right_menu':require('../../../assets/image/right_menu.png')
}
const lists=[
    {value:'首页',path:"/"},
    {value:'关于我们',path:"/aboutUs"},
    {value:'帮助中心',path:"/help"},
]

class UrlItem extends Component {
    render(){
        const urlitems =this.props.list
        const urlitemitem = urlitems.map((item ,index)=>
            <div key={index} className="urlitenNav" onClick={()=>{ 
                history.push(item.path)
                }}>
            {item.value}
        </div>
    )
    return(
        <div className="MenuPlate">
           {urlitemitem}
        </div>
    )
    }
}

class MenuHeader extends Component{
    constructor(props){
        super(props);
        this.state={
        }
    }
    render(){
        return(
            <div className="MenuHeader">
            <div className="center">
                <img src={images.logo} alt="" className="logo"/>
                <div className="rightMenu">
                    <img src={images.right_menu} alt="" className="right_menu"/>
                        <UrlItem list={lists}/>
                </div>
            </div>
            </div>
        )
    }
}




export default MenuHeader;

js通用跳转所使用得方式

最终出现得效果却是这个样子

求大神帮忙，已经翻看了很多种方式，难道现在这个版本react-router 就没有简单得能够使用js跳转
得跳转方式么？还是说必须要写跳转中间价，模拟link点击才能做完整得跳转，这样显然是不合理的。

因为js跳转，可能因为客户没有权限跳转到授权页面，或者详情页面内容位空，跳转到历史的上一个页面，还是有
需求的

Answer 1

这里才用大多数网上说的方法， 使用withRouter ，然后将父亲头部的props继承给需要跳转的列表使用，源码如下，至于createBrowserHistory为何没用，还待研究

import React,{Component} from 'react';
import './index.scss'
import  {createBrowserHistory} from 'history';
import {withRouter} from "react-router-dom";
const images={
    'right_menu':require('../../../assets/image/right_menu.png')
}
const lists=[
    {value:'首页',path:"/"},
    {value:'关于我们',path:"/aboutUs"},
    {value:'帮助中心',path:"/help"},
]

class UrlItem extends Component {
    constructor(props){
        super(props);
    }
    toPath=(path)=>{
        this.props.nav.history.push(path)
    }
    render(){
        const urlitems =lists
        const urlitemitem = urlitems.map((item ,index)=>
            <div key={index} className="urlitenNav" onClick={()=>{ 
                this.toPath(item.path)
                }}>
            {item.value}
        </div>
        )
    return(
        <div className="MenuPlate">
            {urlitemitem}
        </div>
    )
    }
}

class MenuHeader extends Component{
    constructor(props){
        super(props);
        this.state={
        }
    }
    render(){
        return(
            <div className="MenuHeader">
            <div className="center">
                <img src={images.logo} alt="" className="logo"/>
                <div className="rightMenu">
                    <img src={images.right_menu} alt="" className="right_menu"/>
                    <UrlItem list={lists} nav={this.props}/>
                </div>
            </div>
            </div>
        )
    }
}




export default withRouter(MenuHeader);

第一步

第二步骤

第三步骤

第四步