湖南网站建设策划,wordpress 屏蔽谷歌字体,网站防御代理,网页设计素材资讯一、React路由简介
React 官方并没有提供对应的路由插件#xff0c;因此#xff0c;我们需要下载第三方的路由插件 —— React Router DOM。
React Router 在 2021 年 11 月份的时候更新 v6 的版本。本次课就主要讲解V6版本
二、路由配置
1、下载路由
在项目根目录中因此我们需要下载第三方的路由插件 —— React Router DOM。
React Router 在 2021 年 11 月份的时候更新 v6 的版本。本次课就主要讲解V6版本
二、路由配置
1、下载路由
在项目根目录中通过以下命令
yarn add react-router-dom
2、路由配置
1首先在react项目的入口文件index.js文件中使用BrowserRouter将App包裹起来
import {BrowserRouter} from react-router-dom
const root ReactDOM.createRoot(document.getElementById(root));
root.render(BrowserRouterApp //BrowserRouter
);
BrowserRouter包裹这个应用一个React应用只需使用一次
在 React Router 中提供了两种路由模式hash 和 history。
对应的的路由组件分别是 HashRouterhash 模式的路由 BrowserRouterhistory 模式的路由
实际使用时任选其中一个模式引入即可
2其次在App.js文件中使用Routes设置路由出口使用Route指定导航链接
import React from react
import {Routes,Route} from react-router-dom
import Login from ./pages/Login
import Register from ./pages/Register
import Home from ./pages/Home
export default function App() {return (RoutesRoute path/login element{Login/}/RouteRoute path/register element{Register/}/RouteRoute path/ element{Home/}/Route/Routes)
}
核心组件作用说明 Routes:提供一个路由出口满足条件的路由组件会渲染到组件内部 Route: 用于指定导航链接完成路由跳转 path:path属性指定匹配的路径地址 element element属性指定要渲染的组件
三、路由跳转
React Router 中路由的跳转分为两种方式 标签组件跳转 JSAPI跳转
1、通过Link组件跳转
import React from react
import {Link} from react-router-dom
export default function Login() {return (divh1用户登录/h1Link to/register没有账号,去注册/Link/div)
}
2、编程式路由跳转
实现步骤 导入useNavigate钩子函数
import {useNavigate} from react-router-dom 执行钩子函数得到跳转函数 let navigateuseNavigate(); 执行跳转函数完成跳转
import React from react
import {useNavigate} from react-router-dom
export default function Register() {const navigateuseNavigate()const register(e){e.preventDefault()navigate(/login)}return (divh1用户注册/h1a href# onClick{(e){register(e)}}已注册去登录/a/div)
}
注意 如果在跳转时不想加历史记录可以添加额外参数replace为true const register(e){e.preventDefault()navigate(/login,{replace:true})}
四、嵌套路由
1、基础配置
实现步骤 定义嵌套路由声明 RoutesRoute path/login element{Login/}/RouteRoute path/register element{Register/}/RouteRoute path/ element{Home/}Route pathcategory element{Category/}/RouteRoute pathgoods element{Goods/}/Route/Route/Routes 设置二级路由出口
export default function Home() {return (asideulliNavLink to/categroy分类管理/NavLink/liliNavLink to/goods商品管理/NavLink/li/ul/asidesection{/* 二级路由出口 */}Outlet/Outlet/section/)
}
2、默认二级路由设置
RoutesRoute path/login element{Login/}/RouteRoute path/register element{Register/}/RouteRoute path/ element{Home/}{/*默认二级路由添加index属性删除掉path属性*/}Route index element{Main/}/RouteRoute pathcategory element{Category/}/RouteRoute pathgoods element{Goods/}/Route/Route
/Routes
3、404页配置
应用场景当所有的路径都没有匹配的时候显示
语法说明在各级路由的最后添加*号路由作为兜底
RoutesRoute path/login element{Login/}/RouteRoute path/register element{Register/}/RouteRoute path/ element{Home/}{/*默认二级路由添加index属性删除掉path属性*/}Route index element{Main/}/RouteRoute pathcategory element{Category/}/RouteRoute pathgoods element{Goods/}/Route/Route{/*当所有路径都没有匹配时渲染此路由*/}Route path* element{NotFound/}/Route
/Routes
五、路由模式
BrowserRouter模式部署在Nginx服务器上出现404问题的解决办法
1、React打包 在index.js的BrowserRouter上添加basename属性比如
BrowserRouter basename/cremApp/App /BrowserRouter 在package.json中添加homepage: .
{homepage: .
} 在终端上执行打包命令
yarn build
2、Nginx上部署 打包后会产生一个build文件夹然后将该文件改名为crem, 上传文件的linux服务器的/opt目录下 在/etc/nginx/conf.d/default.conf下添加如下配置 location /crem {alias /opt/crem;index index.html;} 进入shell中执行如下命令
ps aux|grep nginx #查看nginx进程
killall -9 nginx #杀死nginx进程
/usr/sbin/nginx #启动nginx服务器
3、防止404的配置 修改/etc/nginx/conf.d/default.conf文件添加如下配置即可 location /crem {alias /opt/crem;index index.html;try_files $uri /crem/index.html;}
六、路由传参
1、searchParams传参
实现步骤 传参
import {useNavigate} from react-router-dom
export default function CategroyList() {let navigateuseNavigate();return (divh2CategroyList/h2button onClick{(){navigate(/categroyDetail?id12)}}详情/button/div)
} 获取参数
import {useSearchParams} from react-router-domexport default function CategoryDetail() {let [params]useSearchParams()return (divh2CategroyDetail/h2divID:{params.get(id)}/div/div)
}
2、params传参
实现步骤 路由设置 BrowserRouterRoutesRoute path/home element{Layout/}Route pathcategroy-detail/:id element{CategoryDetail/}/Route/Route/Routes/BrowserRouter 传参
import {useNavigate} from react-router-dom
export default function CategroyList() {let navigateuseNavigate();return (divh2CategroyList/h2button onClick{(){navigate(/home/categroy-detail/13)}}详情/button/div)
} 获取参数
import React from react
import {useParams} from react-router-domexport default function CategoryDetail() {let paramsuseParams()return (divh2CategroyDetail/h2divID:{params.id}/div/div)
}
七、集中式路由渲染
实现步骤 在项目根目录创建router文件夹并在该目录下创建index.jsx 在router/index.jsx编写路由配置项
import Login from ../pages/Login
import Register from ../pages/Register
import Home from ../pages/Home
import CategoryList from ../pages/Category
import CategoryDetail from ../pages/Category/Detail
import GoodsList from ../pages/Goods
import Main from ../pages/Home/Main
export default [{path:/login,element:Login/},{path:/register,element:Register/},{path:/,element:Home/,children:[{index:true,element:Main/},{path:/categoryList,element:CategoryList/},{path:/categoryDetail/:id,element:CategoryDetail/},{path:/goodsList,element:GoodsList/}]}
] 在App.jsx中通过useRoutes钩子函数来进行集中式配置
import {useRoutes} from react-router-dom
import router from ./router/index
function App() {return useRoutes(router)
}
export default App; 在项目根目录下的index.js中使用BrowserRouter包裹App
root.render(BrowserRouterApp//BrowserRouter
)
八、路由懒加载
1、实现步骤 使用lazy(()import(xxx))方式导入组件
import {lazy} from react
const Loginlazy(()import(../pages/Login))
const Registerlazy(()import(../pages/Register))
const Homelazy(()import(../pages/Home))
const CategoryListlazy(()import(../pages/Category))
const CategoryDetaillazy(()import(../pages/Category/Detail))
const GoodsListlazy(()import(../pages/Goods))
const Mainlazy(()import(../pages/Home/Main))
export default [{path:/login,element:Login/},{path:/register,element:Register/},{path:/,element:Home/,children:[{index:true,element:Main/},{path:/categoryList,element:CategoryList/},{path:/categoryDetail/:id,element:CategoryDetail/},{path:/goodsList,element:GoodsList/}]}
] 通过 React 中提供了 Suspense 组件来实现路由的懒加载。
import {Suspense} from react
function App() {return(Suspense fallback{loading/}{useRoutes(router)}/Suspense)
}
Suspense 组件身上必须设置一个 fallback 属性属性值可以是一个 HTML 标签也可以是一个自定义的组件。用于当路由组件还未加载出来前的提示。
2、解决路由闪屏
配置完路由懒加载后出现当进行路由跳转时出现闪屏现象要向解决这个问题可以使用 react-loadable插件进行解决 先下载react-loadable依赖包
yarn add react-loadable 建立一个loadable.js放在src/utils/loadable.js
import Loadable from react-loadable;
export default function withLoadable(comp) {return Loadable({//懒加载组件页面loader: comp,loading: () null,delay: ,})
} 修改router/index.js
import loadable from ../utils/loadable
const Loginloadable(()import(../pages/Login))
const Registerloadable(()import(../pages/Register))
const Homeloadable(()import(../pages/Home))
const CategoryListloadable(()import(../pages/Category))
const CategoryDetailloadable(()import(../pages/Category/Detail))
const GoodsListloadable(()import(../pages/Goods))
const Mainloadable(()import(../pages/Home/Main))
export default [{path:/login,element:Login/},{path:/register,element:Register/},{path:/,element:Home/,children:[{index:true,element:Main/},{path:/categoryList,element:CategoryList/},{path:/categoryDetail/:id,element:CategoryDetail/},{path:/goodsList,element:GoodsList/}]}
]
