【React-Router】路由导航

最新推荐文章于 2024-11-22 14:53:11 发布

秀秀_heo

最新推荐文章于 2024-11-22 14:53:11 发布

阅读量109

点赞数 1

分类专栏： React 及其周边生态文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/XiugongHao/article/details/134558122

版权

React 及其周边生态专栏收录该内容

75 篇文章 0 订阅

订阅专栏

本文讨论了在路由系统中，ReactRouterDOM的声明式和编程式导航方式，包括如何使用`Link`组件实现声明式跳转和通过`useNavigate`hook进行编程式控制，以在登录页面进行路由切换并传递参数。

摘要由CSDN通过智能技术生成

1. 概念

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

2. 声明式导航

// @/page/Login/index.js

import { Link } from 'react-router-dom'
const Login = () => {
  return <div>
    登录页
    {/* 解析成 a 链接 */}
    <Link to='/article'>跳转到文章页</Link>
    </div>
}
export default Login

3. 编程式导航

// @/page/Login/index.js
import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return <div>
    登录页
    <button onClick={() => navigate('/article')}>跳转到文章页</button>
    </div>
}

export default Login