- Objective: 事件处理程序的进行编程导航
- Breadcrumb:
# 概念阐释
## 语义
`useNavigate` 是一个钩子，它返回一个函数，该函数允许您以编程方式进行导航。
## 语法
```js
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const handleSubmit = e => {
e.preventDefault();
navigate('/')
}
return (
<form onSubmit={handleSubmit}>
{/* form elements */ }
</form>
)
}
```
# 实例
**网页中的前进、后退按钮**
```js
import React from "react";
import { useNavigate } from "react-router-dom";
export default function Footer() {
// get the navigate function
const navigate = useNavigate();
const goBack = () => {
// imperatively redirect back
navigate(-1);
}
const goForward = () => {
// imperatively redirect forward
navigate(1);
}
return (
<footer>
<button onClick={goBack}>Back</button>
<button onClick={goForward}>Forward</button>
</footer>
);
}
```
**点击按钮后导航到指定的页面**
```js
const handleSubmit = e => {
e.preventDefault();
dispatch(signUp({username: username}));
// imperatively redirect the user to /profile
navigate("/profile");
}
```
# 相关内容
# 参考资料
- 本地文件夹：react_router_v6_lession_starting_code
- Footer.js
- SignUp.js
- [React Router useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)