React JS页面导航最优方案：各类跳转方法的推荐选择指引

首先明确：React 路由导航没有普适的「最优方案」，所有方案的选择完全匹配对应使用场景即可，以下是不同场景的推荐优先级：

声明式组件导航（优先选择） #

只要场景符合，优先用声明式组件，符合React的编码范式，可读性和可维护性更高：

• Link 组件：普通用户点击跳转场景首选。它封装了原生<a>标签的逻辑，不会触发整页刷新，跳转逻辑直接写在JSX里，不用额外处理事件，所有静态跳转、不需要额外判断的点击跳转都优先用这个。
• NavLink 组件：导航栏/菜单场景首选。是Link的拓展版本，内置了当前路径匹配的激活态逻辑，自动给匹配的导航项添加激活样式/类名，不用自己手写正则判断路径，侧边栏、顶部导航的跳转直接用这个最省事。
• <Redirect>（React Router v5及之前）/ <Navigate>（React Router v6）：路由规则内的重定向场景首选。比如未登录用户访问权限页直接跳转到登录页、废弃路径自动跳转到新路径，直接写在路由配置或者路由守卫组件里，重定向逻辑清晰可查。

命令式方法导航（组件式满足不了时使用） #

只有在跳转逻辑需要和事件、异步逻辑绑定的时候，再用命令式的导航方法：

• history.push（v5及之前）/ useNavigate 返回的跳转方法（v6）：适合异步逻辑完成后跳转的场景，比如表单提交成功后跳转到详情页、接口返回401状态码后跳转到登录页，这类没法在JSX里写死跳转逻辑的场景再用命令式方法。
• history.replace（v5及之前）/ useNavigate 传入replace: true参数（v6）：功能和push一致，但不会在浏览器历史栈里留下当前页面的记录，适合不需要用户回退的场景，比如支付成功后跳转到订单页、临时中转页跳转，避免用户点回退回到上一步重复触发逻辑。

小提示：不要为了省事全用命令式导航，散落在业务逻辑里的跳转调用后续排查问题会非常麻烦，能写在JSX里的跳转逻辑优先用组件实现。

内容的提问来源于stack exchange，提问作者Adnan Nawaz