1 概念
2 路由环境搭建
3 相关笔记
1 概念
----------------------------------------------------------------------------
1 React 路由特点都是组件化的
2 react-router 是基于上下文实现的
3 路由配置的流程
1 路由模式的选择
2 修改 url的操作接口 (可以后写)
3 配置路由映射关系 (就是路由和对应组件的匹配规则)
----------------------------------------------------------------------------
2 安装
----------------------------------------------------------------------------
1 React路由有3个库 -- react-router / react-router-dom / react-router-native
2 npm install react-router -S
3 npm install react-router-dom -S ( 建议安装这个, 其实安装上面的也可以)
----------------------------------------------------------------------------
3 路由模式的选择 (俩种)
----------------------------------------------------------------------------
1 let {
HashRouter, BrowserRouter} from 'react-router-dom'
2 哈希模式: <HashRouter> <div>呵呵</div> </HashRouter>
3 history 模式: <BrowserRouter> <div>呵呵</div> </BrowserRouter>
4 用引入的组件实例 HashRouter把, 把组件视图包起来, 该组件就有了路由的功能
----------------------------------------------------------------------------
4 改变url的方式 (俩种) + 基础路由匹配规则
----------------------------------------------------------------------------
1 声明式路由跳转 -- App.js
1 let {
HashRouter, NavLink, Link, Route, Redirect} from 'react-router-dom'
2 <HashRouter> 视图结构 </HashRouter>
3 视图结构中(定义 3个改变 url的标签)
1 <NavLink to='/jsx'> jsx学习 </NavLink>
2 <NavLink to='/props'> props学习 </NavLink>
3 <Link to='/hh'> hh</Link>
4 视图结构中(定义视图标签 Route)
1 import Jsx from '@/pages/Jsx'
2 import Props from '@/pages/Props'
3 <Route path='/jsx' component={
Jsx}/>
4 <Route path='/props' component={
Props}/>
5 类似 Vue中的视图标签, 但是这么写没有路由配置文件, 代码乱而多, 而且不方便管理
6 所以我们通常把, 相关数据定义在一个文件中, 然后通过遍历渲染的方式, 在 App.js中定义视图标签
2 编程式路由跳转
1 凡是被 <Route>元素直接包裹的组件, 它的 props都能拿到路由相关 API
2 由于一部分公共组件, 没有在 App.vue中被<Route>渲染和包裹, 所以没有路由相关 API
1 通过一个内置的高阶组件来扩展
1 import {
withRouter} from 'react-router-dom'
2 A1组件: export default withRouter(A1)
2 通过内置 API来实现 (推介)
1 import {
useHistory} from 'react-router-dom'
2 const A1 = ()=>{
const h = useHistory()
3 公共组件只用路由相关 API, 应该是二级路由的使用需求
----------------------------------------------------------------------------
5 标准的路由规则映射定义
----------------------------------------------------------------------------
1 创建路由配置文件 src/router/index.js (定义路由映射关系)
2 引入要配置路由的组件
1 import Jsx from '@/pages/Jsx'
2 import Props from '@/pages/Props'
3 设置路由配置文件
export default [
{
id: 1, path: '/jsx', text: '学习Jsx', component: Jsx},
{
id: 2, path: '/props', text: '学习Props', component: Props}]
4 App.js 中使用
1 import routes from '@/router/index.js'
2 定义渲染 NavLink的方法()
1 感觉导航栏自己按需添加比较科学, 没必要在此处渲染
2 类似 Vue中的 router-link, 通过改变 url, 来达到显示路由对应组件的效果
renderNavLinks() {
return(
routes.map(v =>(<NavLink key={
v.id} to={
v.path}>{
v.text}</NavLink>)) )}
3 定义渲染视图容器的方法
1 给所有配置了路由的组件视图, 定义一个对应的视图容器 <Route>
2 如果自己直接写也是可以的, ( 1级路由文件少的情况下)
3 因为没有 Vue中的默认视图, 所以配置路由的 1级组件都要, 有自己对应的视图容器才可以显示
renderRoutes() {
return(
routes.map(v=>(<Route key={
v.id} path={
v.path} component={
v.component}/>)}
4 使用路由
return (<div>
<nav>{
this.renderNavLinks()}</nav>
<div class="main">
{
this.renderRoutes()}
</div>
</div>)
5 如何实现重定向 Redirect
1 import {
Redirect, Switch} from 'react-router-dom'
2 基于上面的代码
<div class="main">
<Switch>
{
this.renderRoutes()}
<Redirect from='/*' to='/jsx' />
</Switch>
</div>
----------------------------------------------------------------------------
6 动态路由传参
----------------------------------------------------------------------------
1 路由映射表配置 --> path: 'jsx/:id' // 目标页面路由配置
2 路由传参 --> <span onClick={
()=>props.history.push('jsx'+id)}></span> // 起始页面
3 目标页面接收路由参数
1 props.match.params.id // 直接接收
2 import {
useParams} from 'react-router-dom' // 内置 API 接收
const id = useParams().id
----------------------------------------------------------------------------
7 代码分割 (路由懒加载)
----------------------------------------------------------------------------
1 理解
1 把所有的 js文件打包在一个 js文件中, 如果这个项目很大这么干是不可取的, 就要对代码进行分割
2 Vue 中叫做路由懒加载, 这里叫做代码分割, 也是按需加载
2 步骤
1 安装
1 npm i @babel/plugin-syntax-dynamic-import -D // 用于支持动态导入语法
2 npm i @babel/preset-react -D //
3 npm i @loadable/component -S // 用于动态导入组件
2 使用
1 import loadable from '@loadable/component'
2 const Jsx = loadable(()=>import('@/pages/Jsx')) // 懒加载的写法
3 const routes = [{
id: 1, path: '/jsx', text: 'jsx语法', component: 'Jsx'}]
4 export default routes
5 简写: export default []
----------------------------------------------------------------------------