React router(V6)随手笔记.三

一.路由表的使用useRoutes

首先我们观察下面的情景:

如果Route过多，会显得整个组件臃肿，且这些信息在我们的布局代码中的出现好像没那么必要。
路由表由此产生,这个hook主要用来解决Routes拥堵在界面上的问题。下面来讲解一下使用规则。我们刚开始使用的时候，还不是那么熟练，我不要急于一下子把它们分开到另一个文件夹内，我们就现在当前页面内引入，就把当前页面想象成我们将要从外部引入的那个routes.js。这样我们写起来就会非常方便，因为<Routes>就在页面上展示着，你对比着抄就可以了。等抄完以后，直接把这个变量剪切走，再引入就可以了（这种思路不仅仅适用于路由，所有页面的某些组件都可以这样，你可以先全部写在一个页面上，因为可读性是最高的，然后等结构和功能全部实现，你可以把那些可以复用或者没必要和页面组件耦合在一起的一些方法或者变量等单独剪切走。）

下面来梳理一下useRoutes的用法

要使用就得先引入:

先别着急敲代码，先去回顾一下<Routes>这个组件是怎么使用的，

应该大致可以猜出Routes应该可以放下很多route应该是个数组，再观察Route标签大多都是key=value的结构，那么我们大致可以推断出UserRoutes这个钩子应该是接收一个数组，数组里面有多个对象，对象是{path=“”，element=XX}这个书写结构。


在这里提醒一下同样在学习的同学，一看到某个hook上去就急于敲代码，靠背去记下方法里的参数应该怎么写，一定要带上自己的思考去理解，不仅记得牢而且可以举一反三

那么我们开始写吧

1.在当前页面规划如何起变量名

页面也完好无损。

2.在外部编写路由表文件

在Src下面创建Routes文件夹并且新建index.js文件,引入相对应的组件.

返回App组件，去掉无用的引入.

整个页面变得非常cool.I love that.