使用require.context,实现去路由中心化管理

什么是webpack的require.context?

官网解释:

您可以使用require.context()函数创建自己的上下文。

它允许您传入一个目录进行搜索,一个标志表示是否也应该搜索子目录,以及一个正则表达式来匹配文件。

在构建时,webpack解析代码中的require.context()。


直接在项目中使用,我的webpack4+react的一个开源项目,很早之前写的移动端项目,大家有兴趣可以看看,给个Star

gitHub地址:
https://github.com/JinJieTan/react-webpack

并且这个项目还是带docker+gitHub+Travis CI的,教程在我之前写的这里:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 `require.context` 实现 React Router 6 的约定式路由,需要做以下几个步骤: 1. 在项目中安装 React Router 6:`npm install react-router-dom@next` 2. 创建一个文件夹来存放所有的路由组件,比如 `pages` 文件夹。 3. 在 `pages` 文件夹下创建每个路由对应的组件文件,比如 `Home.js`、`About.js` 等。 4. 在 `pages` 文件夹下创建一个 `index.js` 文件,用于导出所有路由组件。 5. 在根目录下创建一个名为 `routes.js` 的文件,用于定义约定式路由规则。 下面是一个示例的 `routes.js` 文件: ```jsx import { lazy } from 'react'; // 使用 require.context 导入所有的路由组件 const pages = require.context('./pages', true, /\.js$/); const routes = [ { path: '/', element: lazy(() => import('./pages/Home')), }, { path: '/about', element: lazy(() => import('./pages/About')), }, ]; export default routes; ``` 在上面的示例中,我们使用 `require.context` 导入了 `pages` 文件夹下的所有 `.js` 文件,并且定义了每个路由的路径和对应的组件。 最后,在根组件中使用 React Router 6 的 `Routes` 组件来渲染路由: ```jsx import React, { lazy, Suspense } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import routes from './routes'; const App = () => { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Routes> {routes.map((route, index) => ( <Route key={index} path={route.path} element={<route.element />} /> ))} </Routes> </Suspense> </Router> ); }; export default App; ``` 在上面的示例中,我们遍历 `routes` 数组,并使用 `Route` 组件来渲染每个路由。 这样就可以使用 `require.context` 实现 React Router 6 的约定式路由了。注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值