- 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)