在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

本文主要是介绍在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

## react-router-dom 编程式路由导航 (v5)

###### 1.push跳转+携带params参数

```jsx
props.history.push(`/b/child1/${id}/${title}`);
```

###### 2.push跳转+携带search参数

```jsx
props.history.push(`/b/child1?id=${id}&title=${title}`);
```

###### 3.push跳转+携带state参数

```jsx
props.history.push(`/b/child1`, { id, title });
```

###### 4.replace跳转+携带params参数

```jsx
this.props.history.replace(`/home/message/detail/${id}/${title}`)
```

###### 5.replace跳转+携带search参数

```jsx
this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
```

###### 6.replace跳转+携带state参数

```jsx
this.props.history.replace(`/home/message/detail`, { id, title });
```

###### 7.前进

```jsx
this.props.history.goForward();
```

###### 8.回退

```jsx
this.props.history.goForward();
```

###### 9.前进或回退 ( go )

```jsx
this.props.history.go(-2); //回退到前2条的路由
```

###### 在一般组件中使用编程式路由导航 (非路由组件)

```jsx
import {withRouter} from 'react-router-dom'

class Header extends Component {
// withRouter(Header)后，就可以在一般组件内部使用 this.props.history
//...
}

export default withRouter(Header)

```

## react-router-dom 编程式路由导航 (v6)

```jsx
// v6版本编程导航使用 useNavigate (以下为引入代码)
import { useNavigate } from "react-router-dom";
export default function A() {
const navigate = useNavigate();
//...
}
```

###### 1.push跳转+携带params参数

```jsx
navigate(`/b/child1/${id}/${title}`);
```

###### 2.push跳转+携带search参数

```jsx
navigate(`/b/child2?id=${id}&title=${title}`);
```

###### 3.push跳转+携带state参数

```jsx
navigate("/b/child2", { state: { id, title }});
```

###### 4.replace跳转+携带params参数

```jsx
navigate(`/b/child1/${id}/${title}`,{replace: true});
```

###### 5.replace跳转+携带search参数

```jsx
navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});
```

###### 6.replace跳转+携带state参数

```jsx
navigate("/b/child2", { state: { id, title },replace: true});
```

>**为您推荐相关文章:**
* 深度解析 React useRef Hook 的使用 ！<https://juejin.cn/post/7042583468152356871>
* 最简洁的 Mbox 6.x 基本使用步骤介绍（仅三步）！！！<https://juejin.cn/post/7041103984219652133>
* (干货) 全网最全 react-router-dom v6.0学习指南（新特性深入解读、持续更新...）！！！<https://juejin.cn/post/7040289734836355085>
* （原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问提<https://juejin.cn/post/7039237659574665247>
* React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】！！！<https://juejin.cn/post/7042849947451916296>

这篇关于在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！