react中react-router-dom中的编程式导航

场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？

页面跳转有两类方式：

1. 用户点击链接跳转

2. 写代码跳转-编程式导航

编程式导航的格式

import {useHistory} from 'react-router'

export default function App() {
  const history = useHistory()
  
  history.push('/find')
  // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）
  history.go(-1) 
  
  // 进入/frend，并替换记录
  history.replace('/frend') 
  
}

history.replace和push的区别

push：向历史记录中添加一条

replace：在历史记录中用目标记录来替换当前记录

动态路由与路由参数获取

<NavLink to="/article/1">文章1</NavLink>
// 可以匹配 /article/1  /article/2  /article/xxx
<Route path="/article/:id" component={Article} />

说明：

1. 上面的/:id 称为占位符。id可以改成其他的变量名。

2. 占位符可以有多个。例如： /article/:形参1/:形参2

在组件中接收到路由的参数

有两个方式：

1.通过props

function Article(props){
    console.log(props.match.params.id)
}

2通过hooks

impoirt { useParams } from 'react-router'
const params = useParams()
console.log(params) // 这里有数据