react子组件点击按钮hashRouter路由跳转

最新推荐文章于 2025-05-08 10:50:17 发布

忘忧、

最新推荐文章于 2025-05-08 10:50:17 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react-router react hashRouter

本文链接：https://blog.youkuaiyun.com/qq_42236699/article/details/88228851

react 专栏收录该内容

0 篇文章

订阅专栏

这篇博客介绍了在React应用中，如何在使用hashRouter的情况下，实现在父子组件间通过按钮点击进行路由跳转，并详细讲解了父组件、子组件的基本代码结构，以及目标组件如何获取传递的参数。作者提到选择hashRouter而非browserRouter是因为项目配置需求，同时也分享了在实际工作中运用React的喜悦和踩坑经历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于react使用hashRouter父子组件中子组件点击按钮后路由跳转)

HashRouter基本代码

<HashRouter>
  <Routers history={history}>
    <Route exact path="/" component={Index}/>
    <Route path="/father" component={Father}/>
  </Routers>
</HashRouter>
class Router extends Component{
	render(){
		return(
			{this.props.child}
		)
	}
}

父组件基本代码

class Father extends Component{
    constructor(props){
        super(props);        
    }
    change(state){
        this.props.history.push({pathname:'/',state:state})
    }
    render(){
        return(
            <div>
                <Child onClick={this.change.bind(this)} />
            </div>
        )
    }
}

子组件基本代码

class Child extends Component{
    constrcutor(props){
        super(props);
    }
    render(){
        return(
            <button onClick={()=>this.props.change({id:'111'})>click me</button>
        )
    }
}

所跳转到的路由所加载的组件获取所传参数（id）

在组件中使用this.props.location.state.id获取参数或使用

console.log(this.props.location)

在浏览器的调试页面查看

结语

关于为什么不用官方推荐的browserRouter：
原因很简单，老大说要用的tomcat，而我试了很多方法配置没有成功，刷新页面就404。
关于没有用通配符传参：
其实是当时没想到，虽然做过子路由的demo，但是因为是刚入门react不久，东西用起来很生疏，完全靠自己摸索和问认识的用react做过项目的人，然后就掉进坑里了。

最后，其实很在工作上用到react还是很开心的，终于用到前后端分离的东西了。虽然总是在踩坑，但是从坑里出来的那份喜悦我就不多说了。