做网站可以卖钱吗,开源cms下载,网站建设公司教程,搭建一个官网需要多少钱React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置
一、实现手动跳转路由
利用 useNavigate 封装一个 withRouter#xff08;hoc/with_router.js#xff09;
import { useNavigate } from react-router-dom;
// 封装一个高阶组件
function withRou…React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置
一、实现手动跳转路由
利用 useNavigate 封装一个 withRouterhoc/with_router.js
import { useNavigate } from react-router-dom;
// 封装一个高阶组件
function withRouter(WrapperComponent) {return function (props) {const navigate useNavigate();const router { navigate };return WrapperComponent {...props} router{router} /;};
}export default withRouter;添加到hoc/index.js文件中
import withRouter from ./with_router;
export { withRouter };利用withRouter拦截Home组件实现手动跳转路由
import React, { PureComponent } from react;
import { Link, Outlet } from react-router-dom;
import { withRouter } from ../hoc;export class Home extends PureComponent {navigateTo(path) {const { navigate } this.props.router;navigate(path);}render() {return (divh1Home/h1div classNamenavLink to/home/recommend推荐/LinkLink to/home/ranking排行榜/Linkbutton onClick{(e) this.navigateTo(/home/songmenu)}歌单/button/div{/* 占位组件 */}Outlet //div);}
}export default withRouter(Home);
二、路由参数传递
路由参数传递包括1.动态路由传参2.查询字符串传参
改造withRouter通过useParams()和useSearchParams()来接收两种参数传递
import {useLocation,useNavigate,useParams,useSearchParams,
} from react-router-dom;
// 封装一个高阶组件
function withRouter(WrapperComponent) {return function (props) {// 1.导航const navigate useNavigate();// 2.动态路由参数const params useParams();// 3.查询字符串的参数/user?nametestage18const location useLocation();const [searchParams] useSearchParams();const query Object.fromEntries(searchParams)console.log(query);const router { navigate, params, location, query };return WrapperComponent {...props} router{router} /;};
}export default withRouter;
在界面中通过params来接收Detail.js
import React, { PureComponent } from react;
import { withRouter } from ../hoc;export class Detail extends PureComponent {render() {const { router } this.props;const { params } router;return (divh2Detail/h2h2id:{params.id}/h2/div);}
}export default withRouter(Detail);
通过 query 来接收User.jsx
import React, { PureComponent } from react;
import { withRouter } from ../hoc;export class User extends PureComponent {render() {const { router } this.props;const { query } router;return (divh1用户:{query.name} - {query.age}/h1/div);}
}export default withRouter(User);
三、路由配置文件
当前App.jsx文件中包含Routes相关信息过于臃肿我们可以将Routes通过配置的形式进行引入。
构建router/index.js将所有的路由配置在此处:
import Home from ../pages/Home;
import About from ../pages/About;
import Login from ../pages/Login;
import NotFound from ../pages/NotFound;
import HomeRecommend from ../pages/HomeRecommend;
import HomeRanking from ../pages/HomeRanking;
import Category from ../pages/Category;
import Order from ../pages/Order;
import HomeSangMenu from ../pages/HomeSangMenu;
import Detail from ../pages/Detail;
import User from ../pages/User;
import { Navigate } from react-router-dom;const routes [{path: /,element: Navigate to/home /,},{path: /home,element: Home /,children: [{path: /home,element: Navigate to/home/recommend /,},{path: /home/recommend,element: HomeRecommend /,},{path: /home/ranking,element: HomeRanking /,},{path: /home/sangmenu,element: HomeSangMenu /,},],},{path: /about,element: About /,},{path: /login,element: Login /,},{path: /category,element: Category /,},{path: /order,element: Order /,},{path: /detail,element: Detail /,},{path: /user,element: User /,},{path: *,element: NotFound /,},
];
export default routes;
改写App.jsx通过useRoutes(routes)引入路由
import React from react;
import {Link,NavLink,useNavigate,useRoutes,
} from react-router-dom;
import ./style.css;
// import Home from ./pages/Home;
// import About from ./pages/About;
// import Login from ./pages/Login;
// import NotFound from ./pages/NotFound;
// import HomeRecommend from ./pages/HomeRecommend;
// import HomeRanking from ./pages/HomeRanking;
// import Category from ./pages/Category;
// import Order from ./pages/Order;
// import HomeSangMenu from ./pages/HomeSangMenu;
// import Detail from ./pages/Detail;
// import User from ./pages/User;
import routes from ./router;export function App(props) {const navigate useNavigate();function navigateTo(path) {console.log(path);navigate(path);}return (div classNameappdiv classNameheaderspanheader/spandiv classNamenavNavLink to/home首页/NavLinkNavLink to/about关于/NavLinkNavLink to/login登陆/NavLinkbutton onClick{(e) navigateTo(/category)}分类/buttonspan onClick{(e) navigateTo(/order )}订单/spanLink to/user?nametestage18用户/Link/divhr //divdiv classNamecontent{/* 映射关系 path Component */}{/* RoutesRoute path/ element{Navigate to/home /} /Route path/home element{Home /}Route path/home element{Navigate to/home/recommend /} /Route path/home/recommend element{HomeRecommend /} /Route path/home/ranking element{HomeRanking /} /Route path/home/songmenu element{HomeSangMenu /} //RouteRoute path/about element{About /} /Route path/login element{Login /} /Route path/category element{Category /} /Route path/order element{Order /} /Route path/detail/:id element{Detail /} /Route path/user element{User /} /Route path* element{NotFound /} //Routes */}{useRoutes(routes)}/divdiv classNamefooterFooter/div/div);
}export default App;
查看运行效果与之前保持一致
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AByH8LHr-1690721021332)(https://gitee.com/outmanm78/markdown-image/raw/master/img/202307302029353.png)]
虽然成功抽离了路由配置信息但是目前的方式会导致路由统一打包没有分包处理。我们可以进行改造一下针对部分配置进行分包处理实现路由懒加载
import React from react;
import Home from ../pages/Home;
// import About from ../pages/About;
// import Login from ../pages/Login;
import NotFound from ../pages/NotFound;
import HomeRecommend from ../pages/HomeRecommend;
import HomeRanking from ../pages/HomeRanking;
import Category from ../pages/Category;
import Order from ../pages/Order;
import HomeSangMenu from ../pages/HomeSangMenu;
import Detail from ../pages/Detail;
import User from ../pages/User;
import { Navigate } from react-router-dom;// 通过React.lazy实现About和Login界面的路由懒加载
const About React.lazy(() import(../pages/About));
const Login React.lazy(() import(../pages/Login));在src/index.js中用Suspense对App进行包裹实现对分包加载的等待
import React, { Suspense } from react;
import ReactDOM from react-dom/client;
import App from ./App;
import { HashRouter } from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeHashRouterSuspense fallback{h3Loading.../h3}App //Suspense/HashRouter/React.StrictMode
);
查看效果与之前保持一致懒加载实现成功
