1. 前言
- 以前的文章路由都是
5x路由配置,最近写个6x的,写完准备玩玩C,到时候在交流- 因为现在脚手架默认安装的
react也是18.x了 所以也注意哦- 路由hook用法单独在写文章
- react-router-dom 官网 英文的 有兴趣的可以自己看着学
2. 效果演示
- 效果图
设计图.png- 下述逻辑按这个来实现
3. 相关依赖安装
- 路由默认最新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
- sass 属于开发依赖
- @loadable/component 路由懒加载
- 贴下主要依赖版本
//生产依赖 "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. 应用场景
- SPA单页应用,因为单页应用只有一个
index.html,我们所看到的的跳转其实都是假跳,而React不自带这个功能,所以使用react-router-dom,vue中的vue-router也是一样的道理- 创建项目
create-react-app 项目名/play-router6
5. 页面准备
- 路由嘛 需要跳转页面,所以先创建4个页面
- src/pages/home/index.jsx
- src/pages/friendList/index.jsx
- src/pages/friendCircle/index.jsx
- src/pages/my/index.jsx
- rfc 是函数式组件快捷方式
- rcc 是类组件快捷方式 插件是
ES7+ React/Redux/React-Native snippets- 每个页面写个
h1标签 简单标识下页面 用于显示区分
import React, { Component } from 'react' export default class index extends Component { render() { return ( <div> <h1>主页</h1> </div> ) } }
6. 路由配置
6.1 完整配置
- 我个人习惯单独搞个路由配置文件,有些人习惯直接写在入口
index.js里面,自己开心就好- 目录结构 src/rouer/index.jsx
- 先上代码在分析
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 懒加载的用法
@loadable/component路由懒加载的使用
import loadable from "@loadable/component"; import Loading from "../components/Loading"; loadable(()=>import("../pages/friendList"),{ fallback: <Loading /> })
- 其实这个
import的写法和vue-router懒加载一样- 第二个参数是 加载回调加载动画,可以自己设置组件
- Loading组件
Loading组件.png
6.3 Route
Route用来定义一个访问路径与 React 组件之间的关系- 对比
vue-router就是单个路由配置- path必须的属性 url显示的路径
- element用来显示组件 注意 组件必须是标签,不能直接写组件名,必须是
<组件名>格式- 懒省事也可以这样写
element={<div>我是主页</div>}
6.4 Routes
- Routes 是用来包住路由访问路径(
Route)的。它决定用户在浏览器中输入的路径到对应加载什么 React 组件- 绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route ;
- 对比
vue-router就是 路由配置表
7. 入口 index.js配置
- 直接上代码 这是
react 18.Xas别名 看个人习惯
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> );
- 使用BrowserRouter把整个应用程序的入口包裹，就相当于把路由模块包功能挂载到
应用程序实例。
4.BrowserRouter就是其中的一个路由组件，就是其中的一个路由模式。浏览器端路由模式HashRouter路由组件是另外一个路由模式。Hash路由模式MemoryRouter路由组件是另外一个路由模式。缓存路由模式
8. App.jsx
- 为了方便把 App.js改为了 App.jsx
- App.css改为了 App.scss
- 也可以直接在 入口
index.js配置,看个人习惯- 直接上代码 在分析
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;
- 清空了原来的内容,自己写
activeclassname路由自带的选中样式- 样式,我把导航放到了底部
.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. 后记
- 就到这,是个基础配置,也有界面效果
- 下篇文章嵌套路由-404见
