React 路由使用

发布网友发布时间：2022-09-30 11:17

共1个回答

热心网友时间：2024-10-07 06:14

react-router-dom 是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：

使用路由时需要为组件指定一个路由的 path ，最终会以 path 为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较简单就是两个 Tab 页面的来回切换。

最终交互时，上述路由配置会出现彼此覆盖的情况，如下图：

为了保证 App 组件，不会在 Tab1 和 Tab2 切换时被覆盖需要使用嵌套路由。

嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此 React 提供了 Outlet 组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

Outlet 渲染一个子路由的元素

最终效果如下图：

通过 path='*' ,实现没有其他路由匹配时，对其进行匹配。

效果如图：

通过路由传递参数到组件中

最终效果：

当我们切换至 Tab1 再切回 Tab2 后，笔记详情页面将空白，效果如下：

可以通过索引路由填补空白，具体只需：

如此当我们重复上述操作时便会呈现如下效果：

当父路由匹配，但其他子路由都不匹配时，由索引路由匹配。索引路由是父路由的默认子路由。
当用户尚未单击导航列表中的一项时，会呈现索引路由。

与 Link 功能一致，差异是可以设置点击后的颜色

搜索参数类似于 URL 参数，形如 /login?success=1

随着我们输入 apple , 路由的地址将变为 /Tab2?text=apple 触发路由重新呈现。

当我们在输入框输入字符时，便会触发列表的过滤显示：

上述UI在交互过程中，当我们点击 Tab1 和 Tab2 进行切换时，或者点击 apple 或 appet 时，会出现输入框被清空，且列表不再被过滤的问题。

react-router 提供了 useLocation 方法，它返回浏览器显示的 url 信息。通过它可以获取浏览器 url 中的搜索参数，从而进行暂存，在具体组件内，可以通过 useSearchParams 获取到暂存的值。具体方式，通过自定义组件包装 NavLink 或 Link 来实现。

上述示例中，路由的切换采用 Link 或者 NavLink ，但当我们的页面元素不使用 Link 时，比如使用 Button ，此时便需要使用采用 useNavigate 。同上可以配合 useLocation 保存搜索字段。

https://reactrouter.com/docs/en/v6/getting-started/tutorial