Vite + React 基本路由 Router

2,439 阅读1分钟

Vite 官方网址 cn.vitejs.dev/guide/

一 、 路由 react-router-dom 6+ 版本

页面创建完,再新建几个文件夹, 一般来说这几个文件夹的名字属于默认了 大家都这么语意化叫

image.png

assets: 存一些图片资源

layouts: 可以看作一个外壳, 里面随便放东西, 一会在路由那里还会说

routers: 用于集中管理路由路径

views:存放页面

还有几个文件夹需要创建, 后续再创建吧....

1、创建页面

image.png

按照这个模式创建三个页面

2、创建路由 router/index.tsx

image.png

3、使用路由 App.tsx

image.png 之后 需要在 main.tsx 用 react-router-dom 提供的 BrowserRouter 活着 HasRouter 进行包裹 才会生效

ok、 目前到这里一个简单的路由就实现了, 你可能会发现 /detail 打开的还是 /home 的页面, 是的没错, 因为 /detail 属于 /home 的子页面, 就好比, 想看 /detail 的时候 必须有 /home ,所以要在 /home 中有一个插槽去承载 /detail 的展示, react-router-dom 为我们提供了一个 Outlet

于是我们修改 /home.tsx 页面

image.png

页面展示的就是

image.png

Gitee地址: gitee.com/yuyou930615…