router---编程式导航

一、编程式导航和声明式导航

声明式:<router-ling to="">
编程式: router.push('')

二、编程式导航的方法

1、push 导航到不同位置
2、replace 
3、 go(n)  参数为整数,可正可负

导航的方法会返回一个promise来告诉导航是否成功

三、编程式导航方法(push、replace)的参数:字符串 | 对象

1、字符串
router.push('/detail')

2、对象(提供了path,params就会被忽略)
router.push({path: '/detail'})
router.push({path: '/detail', query:{}})
router.push({name: 'detail', params:{}}) // 这里的name对应路由配置中的name,大小写敏感

四、在组件中接受导航时传递的参数

route.query.xx
route.params.xx

五、params参数不会显示在地址栏,除非路由里配置了路径参数

  • 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值