Navigate导航

Navigate用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中：

我们这里使用这个的一个案例：

用户跳转到Profile界面；

但是在Profile界面有一个isLogin用于记录用户是否登录：

true：那么显示用户的名称；

false：直接重定向到登录界面；

Not Found页面配置

如果用户随意输入一个地址，该地址无法匹配，那么在路由匹配的位置将什么内容都不显示。

很多时候，我们希望在这种情况下，让用户看到一个Not Found的页面。

这个过程非常简单：

开发一个Not Found页面；

配置对应的Route，并且设置path为*即可；

目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。

我们知道Navigate组件是可以进行路由的跳转的，但是依然是组件的方式。

如果我们希望通过JavaScript代码逻辑进行跳转（比如点击了一个button），那么就需要获取到navigate对象。

在Router6.x版本之后，代码类的API都迁移到了hooks的写法：

如果我们希望进行代码跳转，需要通过useNavigate的Hook获取到navigate对象进行操作；

那么如果是一个函数式组件，我们可以直接调用，但是如果是一个类组件呢？

传递参数有二种方式：

动态路由的方式；

search传递参数；

动态路由的概念指的是路由中的路径并不会固定：

比如/detail的path对应一个组件Detail；

如果我们将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route，并且进行显示；

这个匹配规则，我们就称之为动态路由；

通常情况下，使用动态路由可以为路由传递参数

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情