React 中的编程导航：useNavigate Hook
在 React Router v6 及以上版本中，useNavigate Hook 提供了一种以编程方式在应用内路由之间跳转的便捷方法。 它与传统的点击链接导航不同，允许你根据用户交互（如表单提交、按钮点击或状态变化）动态控制导航流程。 useNavigate 替代了 v5 版本中的 useHistory Hook，并简化了函数组件中的导航处理。
useNavigate 的工作机制
useNavigate Hook 返回一个函数，用于以编程方式跳转到指定的路由。你可以传入路径字符串或位置对象来实现导航。
语法：1
const navigate = useNavigate();
示例：基本导航
以下示例演示了如何在一个按钮点击事件中使用 useNavigate 进行简单的路由跳转：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from react;
import { useNavigate } from react-router-dom;
const Home = () => {
const navigate = useNavigate();
const goToProfile = () => {
navigate(/profile);
};
return (
<div>
<h2>主页</h2>
<button onClick={goToProfile}>前往个人资料页</button>
</div>
);
};
export default Home;
示例：动态参数导航
useNavigate 也支持动态路由参数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from react;
import { useNavigate } from react-router-dom;
const UserList = () => {
const navigate = useNavigate();
const goToUserProfile = (userId) => {
navigate(`/user/${userId}`);
};
return (
<div>
<h2>用户列表</h2>
<button onClick={() => goToUserProfile(1)}>前往用户 1 个人资料页</button>
<button onClick={() => goToUserProfile(2)}>前往用户 2 个人资料页</button>
</div>
);
};
export default UserList;
示例：替换历史记录条目
使用 replace 选项可以替换当前历史记录条目，避免用户使用后退按钮返回：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from react;
import { useNavigate } from react-router-dom;
const SubmitForm = () => {
const navigate = useNavigate();
const handleSubmit = () => {
// 表单提交逻辑...
navigate(/thank-you, { replace: true });
};
return (
<div>
<h2>提交表单</h2>
<button onClick={handleSubmit}>提交</button>
</div>
);
};
export default SubmitForm;
示例：传递状态数据
你可以通过 state 选项传递数据到目标路由，并在目标路由中使用 useLocation 访问：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from react;
import { useNavigate } from react-router-dom;
const Dashboard = () => {
const navigate = useNavigate();
const goToSettings = () => {
navigate(/settings, { state: { userId: 123, userName: 张三 } });
};
return (
<div>
<h2>仪表盘</h2>
<button onClick={goToSettings}>前往用户设置</button>
</div>
);
};
export default Dashboard;
在 /settings 路由中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from react;
import { useLocation } from react-router-dom;
const Settings = () => {
const location = useLocation();
const { userId, userName } = location.state || {};
return (
<div>
<h2>{userName} 的设置 (用户 ID: {userId})</h2>
</div>
);
};
export default Settings;
useNavigate 的应用场景
表单提交后的重定向 基于条件的路由跳转 编程式的路由控制 API 调用成功后的导航总结
useNavigate 是 React Router 中一个强大的工具，用于在函数组件中进行灵活的编程导航，增强了应用的交互性和动态性。 通过 replace 和 state 选项，你可以更好地控制导航行为和数据传递。
以上就是使用 useNavigate Hook 掌握 React 中的导航的详细内容，更多请关注php中文网其它相关文章！