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

Z时代
2024-01-10
分类：技术分享

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

1:react-router" title="react-router">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】react-router-dom 4.x版本无法使用js实现路由跳转

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

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

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

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

回答

这里才用大多数网上说的方法，使用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);