React后台管理系统06 路由

在src目录下新建2views文件夹，用来存放组件，这里我们新建2个路由组件Home About，如下所示：

创建好这两个路由组件之后，在src目录里面我们新建一个router路由文件夹，然后命名一个index.tsx的文件，里面写上如下：

这里我们需要修改main.tsx，这里就不使用App了，这里我们使用的是Router来进行渲染=>修改代码如下：

修改后界面展示如下:

我们可以在这里加上Link标签，使用react-router-dom自带的标签来进行跳转：代码如下

界面展示如下：这样就可以切换了

但是这样还是有一个问题就是如果浏览器只带有“/”的形式去访问的话，那么会丢失

所以需要在路由的index.tsx中加上路由的一个标签，来进行重新定向到Home组件：添加代码如下：

重定向之后的效果如下：

这是第一种路由方式。

---

接下来再看第二种路由的方式：

首先我们先把router中的index.tsx来复制一份，另外一份的代码如下：

但是只改了这个还不够，还需要在main.tsx中进行引入BrowserRouter组件来包裹着App组件，这种方式BrowserRouer是写在main.tsx里面的，而第一种方式是直接写在router中的index.tsx中的

在App.tsx中进行改写

展示效果如下：

可以看到也是可以实现的。

我们需要对代码进行优化，因为现在的方式是在路由里面一开始就进行引入，这样不太好，需要做成懒加载的方式：修改index.tsx路由文件：

启动后点击About发现控制台报错了

具体的原因是：

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

英文翻译一下：

意思就是用法不对，需要使用suspend进行包裹住，于是需要修改我们懒加载的代码：

引入React本身，然后使用Suspense进行包裹住，里面有一个回调函数，我们来看看效果

可以发现没有报错了。但是这样的代码不够优雅：很多重复的内容，我们使用ts定义一个方法来进行代码优化：