react17 react-router6 vite手把手搭建一个简易项目（二）

首先看一下这4个文件，为了结构清晰App.css，index.js，logo.svg可以先删除掉，然后在src下新建一个assets文件夹（我们可以把静态资源统一放到这里管理），在assets新建一个images文件夹然后将favicon.svg放到images文件夹里

把main.jsx的这一行去掉

把imdex.html的红框内容改成 /src/assets/images/favicon.svg

现在的页面结构长这样

没有了一些目前不需要的内容 是不是还比较清晰呢？下一步我们是用react-router6的另外一个属性 Outlet，官方文档这样介绍：当子路由匹配时，它将嵌套 UI 组件以进行共享布局。

怎么个意思呢？我们先做代码在做解释

将about.jsx页面改为

import { Link,Outlet } from "react-router-dom";export default function About() {  return (  <div style={{color:'green'}}>      <div>我是关于页面</div>      <ul>        <li>          <Link to="/about/about1">查看about1</Link>        </li>        <li>          <Link to="/about/about2">查看about2</Link>        </li>      </ul>      <Outlet/>  </div>)}

在pages下新建about1.jsx和about2.jsx

export default function About1() {  return <div>我是about1</div>}

export default function About2() {  return <div>我是about2</div>}

将App.jsx改为如下

import { Link, BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";import About1 from "./pages/About1";import About2 from "./pages/About2";export default function App() {  return (    <BrowserRouter>            <ul>        <li>          <Link to="/">去主页</Link>        </li>        <li>          <Link to="/about">去关于</Link>        </li>      </ul>      <Routes>        <Route path="/" element={<Home />}></Route>        <Route path="/about" element={<About />}>          <Route path="/about/about1" element={<About1 />}></Route>          <Route path="/about/about2" element={<About2 />}></Route>        </Route>      </Routes>    </BrowserRouter>  );}

然后打开页面点击试试，是不是懂了？

Outlet主要是用来在的路由里，遇到匹配的路由，就会将模块展示出来，这样我们在开发的过程中就不必考虑模块嵌套，而是可以和路由分开，路由归路由管理，模块归模块管理，我们只关心路由跟模块匹配上即可。

git地址_github.com/1575411352/…_