【React-Router】路由导航

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
1
2
3
4
5
6
7
8
9
10
11

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
1
2
3
4
5
6
7
8
9
10
11