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.X
-
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>
);
- 使用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见
参考资料
6.x 嵌套路由-404配置-2
6x 路由传值
react-router-dom 官网
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
网友评论