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中进行改写

展示效果如下：

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