React 如何实现路由跳转？

Question

React 如何实现路由跳转？

仓乃文 · Accepted Answer

React 路由跳转有两种方式：Link 组件（声明式）和 useNavigate 钩子（命令式）。推荐使用 react-router-dom v6 的 API。使用 Link 组件（声明式跳转）： ```javascript import { Link } from "react-router-dom"; function Navigation() { return ( ); } ``` 使用 useNavigate（命令式跳转，推荐）： ```javascript import { useNavigate } from "react-router-dom"; function LoginButton() { const navigate = useNavigate(); const handleLogin = async () => { await login(); navigate("/dashboard", { replace: true }); // replace 替换历史记录 }; return ; } ``` 接收路由参数： ```javascript import { useParams, useLocation } from "react-router-dom"; function UserProfile() { const { userId } = useParams(); // /user/:userId const location = useLocation(); // 获取 state const from = location.state?.from; } ``` 补充说明： - Link 适用于导航链接，用户点击触发 - useNavigate 适用于事件处理中跳转，如登录后跳转 - navigate 第二个参数 { replace: true } 替换历史记录 - v6 中 useParams 直接从 hook 获取，不用 withRouter