- Objective: 可编程导航 - Breadcrumb: # 概念阐释 ## 语义 `Navigate` 是一个React组件,用于在组件的渲染过程中进行导航。这种方式更适用于基于渲染逻辑的导航,比如在条件渲染或者在渲染其他组件的同时进行导航。 ## 语法 ```js <Navigate to="/"> ``` # 实例 ```js import { Navigate } from "react-router-dom"; export default function Profile () { ... if (!loggedIn) return <Navigate to="/sign-up" /> //如果没有登录成功,就跳转到sign-up组建 return(...) } ``` # 相关内容 `Navigate`组件适合于基于**组件**渲染逻辑的导航,而[[React Router useNavigate]]钩子更适合于需要在**事件处理**中进行编程式导航的情况。两者都是React Router的重要部分,用于不同的场景和需求。 # 参考资料 - 本地文件夹:react_router_v6_lession_starting_code - Profile.js - [React Router Navigate](https://reactrouter.com/en/main/components/navigate)