React-35:编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

this.prosp.history.push() 有记录
this.prosp.history.replace() 不留记录
this.prosp.history.goBack() 回退
this.prosp.history.goForward() 前进
this.prosp.history.go() -2 回退两步 1 前进一步

例子:

	back = ()=>{  // 回退
		this.props.history.goBack()
	}

	forward = ()=>{  // 前进
		this.props.history.goForward()
	}

	go = ()=>{  // -2 回退两步 1 前进一步
		this.props.history.go(-2)
	}

push 跳转 例子

//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 跳转 例子

//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})
		
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React Router 是 React 应用程序中最常用的路由库之一。它允许我们定义应用程序的路由,并在不刷新浏览器的情况下更新 URL。React Router v6 是 React Router 的最新版本,它带来了一些新的变化和功能。 下面是 React Router v6 中使用编程导航的示例: 首先,您需要导入 useNavigate 钩子: ```javascript import { useNavigate } from 'react-router-dom'; ``` 然后在您的组件中使用它: ```javascript function MyComponent() { const navigate = useNavigate(); function handleClick() { navigate('/path/to/page'); } return ( <button onClick={handleClick}> Go to page </button> ); } ``` 在上面的示例中,我们首先导入 useNavigate 钩子,然后在组件中定义了 handleClick 函数。在 handleClick 函数中,我们使用 navigate 函数来导航到另一个页面。 navigate 函数接受一个路径字符串作为参数,该路径字符串表示我们要导航到的页面的路径。在上面的示例中,我们将路径设置为 "/path/to/page"。 最后,我们将 handleClick 函数绑定到一个按钮的 onClick 事件上,这样当用户单击按钮时,它将导航到另一个页面。 使用 navigate 函数时,您还可以传递一些选项,例如 replace: true,以在导航时替换当前历史记录中的条目,而不是向其添加新条目。例如: ```javascript navigate('/path/to/page', { replace: true }); ``` 这将替换当前历史记录中的条目,而不是向其添加新条目。 除了 useNavigate 钩子之外,React Router v6 还提供了 useLocation、useParams 和 useMatch 等钩子,它们可以帮助您在应用程序中进行更高级别的编程导航

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

臧小川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值