1. 前言

1. 以前的文章路由都是5x路由配置,最近写个6x的,写完准备玩玩C,到时候在交流
2. 因为现在脚手架默认安装的react也是18.x了 所以也注意哦
3. 路由hook用法单独在写文章
4. react-router-dom 官网 英文的 有兴趣的可以自己看着学

---

2. 效果演示

1. 效果图 设计图.png
2. 下述逻辑按这个来实现

---

3. 相关依赖安装

1. 路由默认最新6.X, 如需使用5.x, 在模块名后加@5

    npm install react-router-dom  @loadable/component  --save     // 6.0
    或
    npm install react-router-dom@5 --save   // 5.0
     //开发依赖
    npm install  sass -D
 

2. sass 属于开发依赖
3. @loadable/component 路由懒加载
4. 贴下主要依赖版本

//生产依赖
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
   "@loadable/component": "^5.15.2",
// 开发依赖
    "sass": "^1.52.3"
  }

---

4. 应用场景

1. SPA单页应用,因为单页应用只有一个index.html,我们所看到的的跳转其实都是假跳,而React不自带这个功能,所以使用react-router-dom,vue中的vue-router也是一样的道理
2. 创建项目

create-react-app 项目名/play-router6

---

5. 页面准备

1. 路由嘛 需要跳转页面,所以先创建4个页面
2. src/pages/home/index.jsx
3. src/pages/friendList/index.jsx
4. src/pages/friendCircle/index.jsx
5. src/pages/my/index.jsx
6. rfc 是函数式组件快捷方式
7. rcc 是类组件快捷方式 插件是 ES7+ React/Redux/React-Native snippets
8. 每个页面写个h1标签 简单标识下页面 用于显示区分

import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <div>
        <h1>主页</h1>
      </div>
    )
  }
}

---

6. 路由配置

6.1 完整配置

1. 我个人习惯单独搞个路由配置文件,有些人习惯直接写在入口index.js里面,自己开心就好
2. 目录结构 src/rouer/index.jsx
3. 先上代码在分析

import loadable from "@loadable/component";
import Loading from "../components/Loading";
import Home from "../pages/home";
import { Routes, Route } from "react-router-dom";

const  FriendList = loadable(()=>import("../pages/friendList"),{ fallback: <Loading /> }) ;
const  FriendCircle = loadable(()=>import("../pages/friendCircle"),{ fallback: <Loading /> }) ;
const  MyPage = loadable(()=>import("../pages/my"),{ fallback: <Loading /> }) ;

export default function () {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/fl" element={<FriendList />} />
      <Route path="/fc" element={<FriendCircle />} />
      <Route path="/my" element={<MyPage />} />
    </Routes>
  );
}

---

6.2 懒加载的用法

1. @loadable/component路由懒加载的使用

import loadable from "@loadable/component";
import Loading from "../components/Loading";
loadable(()=>import("../pages/friendList"),{ fallback: <Loading /> })

2. 其实这个import的写法和vue-router懒加载一样
3. 第二个参数是 加载回调加载动画,可以自己设置组件
4. Loading组件 Loading组件.png

---

6.3 Route

1. Route 用来定义一个访问路径与 React 组件之间的关系
2. 对比vue-router就是单个路由配置
3. path必须的属性 url显示的路径
4. element用来显示组件 注意 组件必须是标签,不能直接写组件名,必须是<组件名>格式
5. 懒省事也可以这样写 element={<div>我是主页</div>}

---

6.4 Routes

1. Routes 是用来包住路由访问路径(Route)的。它决定用户在浏览器中输入的路径到对应加载什么 React 组件
2. 绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route ;
3. 对比vue-router就是 路由配置表

---

7. 入口 index.js配置

1. 直接上代码 这是react 18.X
2. as别名 看个人习惯

import { BrowserRouter as Router } from "react-router-dom";
import RouterComponent from "./router";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <React.StrictMode>
      <App />
    </React.StrictMode>
    <RouterComponent />
  </Router>
);

3. 使用BrowserRouter把整个应用程序的入口包裹，就相当于把路由模块包功能挂载到应用程序实例。
   4.BrowserRouter就是其中的一个路由组件，就是其中的一个路由模式。浏览器端路由模式
4. HashRouter路由组件是另外一个路由模式。Hash路由模式
5. MemoryRouter路由组件是另外一个路由模式。缓存路由模式

---

8. App.jsx

1. 为了方便把 App.js改为了 App.jsx
2. App.css改为了 App.scss
3. 也可以直接在 入口index.js配置,看个人习惯
4. 直接上代码 在分析

import "./App.scss";
import { NavLink } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <div className="NavBar">
        <NavLink to="/" activeclassname="active">主页</NavLink>
        <NavLink to="/fl">联系人</NavLink>
        <NavLink to="/fc">朋友圈</NavLink>
        <NavLink to="/my">我的</NavLink>
      </div>
    </div>
  );
}

export default App;

5. 清空了原来的内容,自己写
6. activeclassname 路由自带的选中样式
7. 样式,我把导航放到了底部

.NavBar  {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #2567ff;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  a{
    flex: 1;
    text-decoration: none;
    color: #FFF;
  }
  .active{
    color: #F00;
  }
}

---

9. 后记

1. 就到这,是个基础配置,也有界面效果
2. 下篇文章嵌套路由-404见

---

参考资料

6.x 嵌套路由-404配置-2
6x 路由传值
react-router-dom 官网

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉