react中的push和replace跳转

最新推荐文章于 2024-03-14 17:21:17 发布

原创最新推荐文章于 2024-03-14 17:21:17 发布 · 870 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

react 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了在前端路由中`push`和`replace`两种方法的区别。`push`方法用于添加新的历史记录条目，允许用户通过浏览器的回退按钮返回上一级页面，而`replace`方法则会替换当前的历史记录条目，阻止用户回退到被替换的页面。文章详细展示了如何使用这两种方法携带不同类型的参数（params, search, state）进行页面跳转。

<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
<button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>

push路由跳转是可以跳转到上一级,可以返回的

	pushShow = (id,title)=>{
		//push跳转+携带params参数
		// this.props.history.push(`/home/message/detail/${id}/${title}`)

		//push跳转+携带search参数
		// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

		//push跳转+携带state参数
		this.props.history.push(`/home/message/detail`,{id,title})
		
	}

replace路由跳转是不能返回上一层的

	replaceShow = (id,title)=>{
		//replace跳转+携带params参数
		//this.props.history.replace(`/home/message/detail/${id}/${title}`)

		//replace跳转+携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

		//replace跳转+携带state参数
		this.props.history.replace(`/home/message/detail`,{id,title})
	}