一. 路由表的应用 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.