React Router - 路由导航跳转

路由导航的概念

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

有两种路由导航的方式：声明式导航、编程式导航。

声明式导航

说明

声明式导航是指在模版中通过<Link />组件描述出要跳转到哪里去。例如，后台管理系统的左侧菜单通常用这种方式。

语法如下：

<Link to="new-path">新路径</Link>

语法说明：通过给组件的to属性指定要跳转到路由的path，组件会被渲染为浏览器支持的a链接。如果要传参，直接通过字符串拼接的方式拼接参数即可。

示例

下面代码中，在登录页通过<Link to="/article">跳转到文章页</Link>配置跳转到了文章页：

展示效果：

在浏览器中检查源代码，是被解析成了a链接：

点击，成功跳转：

编程式导航

说明

编程式导航是指通过 useNavigate钩子得到导航方法，然后通过调用方法，以命令的形式进行路由跳转。例如，想在登录请求完毕之后跳转，就可以选择这种方式，更加灵活。

https://reactrouter.com/en/main/hooks/use-navigate#usenavigate

语法说明：通过调用navigate方法传入地址path实现跳转。

示例

点击按钮，成功跳转：