umijs / plugins Goto Github PK
View Code? Open in Web Editor NEW🍣 The one-stop shop for official Umi plugins and presets.
🍣 The one-stop shop for official Umi plugins and presets.
Access can be set with initial state, but it also needs to be updated when a user logs in or logs out. Is there an example of how to achieve this?
@umijs/plugin-request 请求出错而且响应包为空,结果没调用errorConfig.adaptor
求解决。
plugin-request依赖antd的message, notification组件,如果不装antd,或造成插件无法使用,作为一个单独插件来说,设计上不要太依赖antd吧,没法做到通用。如果必须引用,用户的是antd-mobile,request error的组件是否要换成mobile端的呢?plugin-antd是内置了antd和antd-mobile,这里是否要做切换?
1.x 的用法是在插件里注册一组应用数据:
'@umijs/plugin-qiankun',
{
master: {
// 注册子应用信息
apps: [
{
name: 'app1', // 唯一 id
entry: '//localhost:7001', // html entry
base: '/app1', // app1 的路由前缀,通过这个前缀判断是否要启动该应用,通常跟子应用的 base 保持一致
history: 'browser', // 子应用的 history 配置,默认为当前主应用 history 配置
},
{
name: 'app2',
entry: {
// TODO 支持 config entry
scripts: [],
styles: [],
},
base: '/app2',
},
],
jsSandbox: true, // 是否启用 js 沙箱,默认为 false
prefetch: true, // 是否启用 prefetch 特性,默认为 true
},
},
当用户场景比较简单,比如所有的应用渲染到一个固定的容器里,这个使用方式足够 cover 了。
但一旦场景复杂了,会触发各种问题或者咨询。
比如子应用挂载的容器是动态渲染的:
<Layout>
<Router>
<Route path="/app1"><AppContainer id="container1"/></Route>
<Route path="/app2"><AppContainer id="container2"/></Route>
</Router>
</Layout>
由于路由及事件都是异步的,这种场景下很难确保子应用的 mount 已经开始的时候,对应路由的 Route
组件是已经渲染完毕的,导致由于子应用找不到挂载点而抛异常的问题出现。
而且现在在 plugin 场景下,默认都是 route-based 的用法,对于 bigfly 之类的场景,期望应用在某个指定的局部渲染,而本身跟路由是无关的,支持起来也会比较麻烦。
插件配置只需要配置纯粹的子应用元信息,如只需要有 name
、entry
这两个字段:
'@umijs/plugin-qiankun',
{
master: {
// 注册子应用信息
apps: [
{
name: 'app1', // 唯一 id
entry: '//localhost:7001', // html entry
},
{
name: 'app2',
entry: '//localhost:7002',
},
],
jsSandbox: true, // 是否启用 js 沙箱,默认为 false
prefetch: true, // 是否启用 prefetch 特性,默认为 true
},
},
应用还是全量在插件配置里注册,好处是可以集中管理子应用信息,也可以方便的做预加载,但是应用激活不再单一的依赖路由状态。
比如可以直接在 umi routes 里这样配置:
const routes = [
{
path: '/app1',
microApp: 'app1'
},
{
path: '/app2',
microApp: 'app2'
},
{
path: '/app3',
microApp: 'app3'
},
]
在实现上,配置了 microApp
的路由,插件会自动生成一个容器组件,并添加到 component 属性上,容器组件的实现里负责激活对应的应用,并在容器销毁时卸载应用。这样就能很好的保证子应用加载过程中的时序。
当我们希望不依赖路由配置,将子应用渲染到任意我们期望的地方时,这样用就可以了:
import { MicroApp } from 'umi';
function MyPage() {
return (
<div>
<div>
<MicroApp name="app1" />
</div>
</div>
)
}
MicroApp
也是由插件生成,可以直接复用路由方式生成的容器组件。
activeRule
是变化的,同一个应用放到不同的容器里 activeRule
就完全不同,而在目前 qiankun/single-spa 的逻辑里,每个子应用的 activeRule 是固定的。MicroApp
组件渲染的方式,子应用大概率要求不能是有路由的系统,不然就会有改造的需求,因为有路由意味着子应用不是在什么 url 下都能渲染的。plugin-preact
的依赖只有 preact
,没有 preact-compat
,但对 preact-compat
的 alias 又是必须的。
import { Effect, Reducer, Subscription } from 'umi'
export interface IState {
count: 0
}
export interface IModel {
namespace: 'foo'
state: IState
effects: {
init: Effect
}
reducers: {
update: Reducer<IState>
}
subscriptions: { setup: Subscription }
}
const TestModel: IModel = {
namespace: 'foo',
state: {
count: 0,
},
effects: {
*init({ payload }, { call, put }) {
yield put({
type: 'update',
payload: 1,
})
},
},
reducers: {
// error
update(state, { payload }) {
// error
state.count = payload
},
},
subscriptions: {
setup({ dispatch, history }) {
dispatch({
type: 'init',
})
},
},
}
export default TestModel
plugin-dva -> src -> connect.tpl 中添加一个 ImmerReducer 类型
export type ImmerReducer<S = any, A extends Action = AnyAction> = (
state: S,
action: A
) => void
写为如下方式
import { Link, request ,useRequest} from 'umi';
...
const { data, error, loading } = useRequest({
url: '/api/changeUsername',
method: 'post',
});
会抛出url不是string的异常。
**import { useRequest } from '@umijs/hooks';**
const { data, error, loading } = useRequest({
url: '/api/changeUsername',
method: 'post',
此种方式没有异常。不知道有没有人处理呢?
umijs下面发现引用了不同版本的use-request,一个是hook,另一直接引用use-request。
创建项目的命令
yarn create umi
选择的是使用 umijs3
Copied from umijs/umi#4520.
Right now, we only support {lang}-{country}
format, but browser give us more via navigator.language
, it might be zh-Hans-CN
, or just zh
@umijs/plugin-request插件的构建时配置和运行时配置均不起作用,我按照文档示例配置如下:
import { RequestConfig } from 'umi';
export const request: RequestConfig = {
timeout: 1000,
errorConfig: {},
middlewares: [],
};
运行时配置不起作用
1、使用@umijs/plugin-layout插件时,app.ts运行时配置onError、ErrorComponent不生效;
2、当ts代码报错时,使用@umijs/plugin-layout并且@umijs/plugin-locale未开启的情况下,useIntl为undefined,导致@umijs/plugin-layout代码报错,
webpack:///./node_modules/@umijs/plugin-layout/lib/utils/intl.js #56行。
`Uncaught TypeError: (0 , _umi(...).useIntl) is not a function`
`const intl = (0, _umi().useIntl)();`
https://github.com/liquorxm/umi-useIntl
1、通过访问 http://localhost:8000/setting
页面复现 onError
不生效、以及问题2,切换config/config.ts中locale注释来查看useIntl导致的代码报错;
2、通过访问 http://localhost:8001/dashboard 页面复现ErrorComponent不生效问题。
umi 3.0.8
export const request: RequestConfig = {
timeout: 6000,
prefix: '/api',
errorConfig: {
adaptor: resData => {
console.log('resData', resData);
return {
data: resData.data,
success: resData.status === 'ok',
errorMessage: resData.message,
};
},
},
middlewares: [],
};
执行代码,
const data = await request<ArticleItem[]>('/blog/article', {
params: {
page: params.current,
size: params.pageSize,
},
});
结果:
data 仍然是resData,没有success
umi-plugin-antd-icon-config :"^2.0.0" 版本会全量打包ant-icon
能升级下依赖吗
1.plugin-initial-state中存放角色 ,
2.plugin-access 插件定义权限,
3.plugin-layout 渲染权限内相应菜单。
问题:当动态修改了plugin-initial-state中的角色后,plugin-layout插件会渲染出相应的菜单,但是点击菜单后会出现 403 无权限访问页面。plugin-layout源码index.tsx中定义了layoutConfig 变量,是否应该修改成当plugin-initial-state中的属性发生变化时会触发重新更新layoutConfig?
@umijs/plugin-request由于封装一层在异步调用后初始化相关方法,导致以前的request.get(url[, options])、request.post(url[, options])、request.delete(url[, options])、request.patch(url[, options])等快捷方法无法使用,最致命的就是request.interceptors.request.use这无法使用了
尝试使用 umi3 + qiankun 做微前端, 然后模仿 plugins 内的 plugin-qiankun/examples 来搭 master,但是运行后在 runtimePlugin.js
内的 apps
为 undefined
在chrome内调试可以看到 runtimePlugin.js 内的
async function getMasterRuntime() {
const config = plugin.applyPlugins({
key: 'qiankun',
type: ApplyPluginsType.modify,
initialValue: {},
async: true,
});
const { master } = config;
return master || config;
}
这里的 config
为 Promise 对象
这里参考 plugin-qiankun/examples/master/app.js
import request from './services/request';
export const qiankun = request('/apps').then(apps => ({ apps }));
.umirc.ts 的配置
import { defineConfig } from 'umi';
export default defineConfig({
analyze: {
analyzerMode: 'server',
analyzerPort: 8889,
openAnalyzer: true,
// generate stats file while ANALYZE_DUMP exist
generateStatsFile: false,
statsFilename: 'stats.json',
logLevel: 'info',
defaultSizes: 'parsed', // stat // gzip
},
base: '/qiankun_portal/',
hash: true,
ignoreMomentLocale: true,
nodeModulesTransform: {
type: 'none',
},
publicPath: '/qiankun_portal/',
routes: [{ path: '/', component: '@/pages/index' }],
qiankun: {
master: {
defer: true,
jsSandbox: true,
prefetch: true,
},
},
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
'/api/app1': {
target: 'http://localhost:8001',
changeOrigin: true,
},
'/api/app3': {
target: 'http://localhost:8002',
changeOrigin: true,
},
},
});
比如导航在左侧和导航在顶部的情况 ,需要动态切换布局的情况
[email protected]
[email protected]
@ant-design/[email protected]
@ant-design/[email protected]
[email protected]
[email protected]
@umijs/[email protected]
@umijs/[email protected]
@umijs/[email protected]
通过initialState的refresh刷新权限
const { refresh } = useModel('@@initialState');
refresh()
初始权限为
{}
刷新之后的权限为
{
canRead: true
}
菜单不会更新
子应用是create react app 创建的老项目:
启动的时候会报出来标题错误,看umi 3.0 api
真不知道还需要怎么配置呢?
2.2的这个描述没太理解如何配置
A clear and concise description of what the bug is.
Provide a mini GitHub repository which can reproduce the issue.
Steps to reproduce the behavior: 1. 2.
Expected behavior 1. 2.
import { useIntl } from 'umi';
构建时提示 "export 'useIntl' was not found in 'umi'
plugin-locale 版本是 0.3.0
复现repo: umi-model-issue.
是这样的,在一个modeluseMessageModelHasError.ts
,引用另一个model的值,如下:
import { useCallback } from 'react';
import { useModel } from 'umi';
export default function useMessageModel() {
const { title } = useModel('useAppModel');
const sayHiError = useCallback(() => {
console.log('error hello ', title);
}, [title]);
return {
sayHiError,
};
}
会有如下错误提示:
'title' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)
但是,功能一模一样的代码,useMessageModel.ts
,不直接用解构语法,改成如下这样:
import { useCallback } from 'react';
import { useModel } from 'umi';
export default function useMessageModel() {
const model = useModel('useAppModel');
const { title } = model;
const sayHi = useCallback(() => {
console.log('hello ', title);
}, [title]);
return {
sayHi,
};
}
就没错了。
而且即便是上面报语法错误的写法,也已经可以正确运行,始终没理解这个错误的原因是什么
设置Access.ts文件后, 配置路由仅能正确识别一级菜单的权限, 如果在一级菜单添加access属性后, 如果权限不匹配则二级菜单也无权限, 二级菜单(routes子菜单)仅在渲染左侧菜单时隐藏, 直接访问URL可以正常加载
在二级菜单中设置access后如果权限不匹配, 直接使用URL访问也应该拒绝访问
另外, 如果在路由中使用access熟悉定义了菜单需要的权限后, 如果Access.ts中没有声明这个权限, 默认是跳过了权限校验
能否在Access.ts中加一个参数, 用于控制如果查找的权限未定义, 默认通过还是拒绝的行为, 有些系统因为需要通过后台传递权限, 有时候只会向前台返回已拥有的权限, 并不会将所有权限的状态都返回, 也就会出现目前的情况, Access.ts中未定义(其实就是不具备这个权限)就跳过了权限判断
如图所示,当权限定义为对象形式的时候,生成的.umi临时文件里面的routes是错误的,
同时发现,如果已经npm run start启动了服务 再去修改路由里面的access的值,.umi/core/routes文件内容不会更新。
Provide a mini GitHub repository which can reproduce the issue. Use
yarn create @umijs/umi-app
then upload to your GitHub
Steps to reproduce the behavior: 1. 2.
Expected behavior 1. 2.
umi 3.0.10
看到代码有withdva的测试
dva.js
export default {
state: {},
reducers: {},
effects: {},
};
但是实际使用 const dva =useModel('dva'),dva是undefined。
这样dva的所有model都不能用了?
我本地dev开完之后,本地build打包没有问题。
推到服务器构建就出了问题。
初步判断。如果不dev一下,直接打包会报错。
如果不dev一下,src/.umi就会不存在,直接build就会出问题,会生成src/.umi和src/.umi-production
umi proxy [/auth] ====> http://courseauth.uae.shensz.local
✖ Webpack
Compiled with some errors in 48.72s
ERROR Failed to compile with 2 errors 13:47:24
This dependency was not found:
* @/.umi/qiankunContext in ./node_modules/@umijs/plugin-qiankun/lib/slave/runtimePlugin.js, ./src/.umi-production/core/umiExports.ts
To install it, you can run: npm install --save @/.umi/qiankunContext
Child
ERROR in ./node_modules/@umijs/plugin-qiankun/lib/slave/runtimePlugin.js
Module not found: Error: Can't resolve '@/.umi/qiankunContext' in '/Users/elelee/Desktop/projects/guocha/node_modules/@umijs/plugin-qiankun/lib/slave'
@ ./node_modules/@umijs/plugin-qiankun/lib/slave/runtimePlugin.js 30:17-49
@ ./src/.umi-production/core/plugin.ts
@ ./src/.umi-production/umi.ts
@ multi ./node_modules/@umijs/bundler-webpack/lib/getConfig/runtimePublicPathEntry.js ./src/.umi-production/umi.ts
ERROR in ./src/.umi-production/core/umiExports.ts
Module not found: Error: Can't resolve '@/.umi/qiankunContext' in '/Users/elelee/Desktop/projects/guocha/src/.umi-production/core'
@ ./src/.umi-production/core/umiExports.ts 6:0-55 6:0-55
@ ./node_modules/umi/dist/index.esm.js
@ ./node_modules/@umijs/plugin-qiankun/lib/slave/lifecycles.js
@ ./src/.umi-production/umi.ts
@ multi ./node_modules/@umijs/bundler-webpack/lib/getConfig/runtimePublicPathEntry.js ./src/.umi-production/umi.ts
build failed
Error: build failed
at compiler.run (/Users/elelee/Desktop/projects/guocha/node_modules/@umijs/bundler-webpack/lib/index.js:107:27)
at finalCallback (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:254:12)
at runWithDependencies.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:277:6)
at done (/Users/elelee/Desktop/projects/guocha/node_modules/neo-async/async.js:2931:13)
at runCompilers (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:181:48)
at err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:188:7)
at compiler.run (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/MultiCompiler.js:270:7)
at finalCallback (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:257:39)
at hooks.done.callAsync.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:273:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
at AsyncSeriesHook.lazyCompileHook (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/Hook.js:154:20)
at onCompiled (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:271:21)
at hooks.afterCompile.callAsync.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/elelee/Desktop/projects/guocha/node_modules/tapable/lib/Hook.js:154:20)
at compilation.seal.err (/Users/elelee/Desktop/projects/guocha/node_modules/webpack/lib/Compiler.js:678:31)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
https://github.com/lei3536/qiankunSonApp
https://github.com/umijs/plugins/blob/master/packages/plugin-layout/src/layout/index.tsx#L28
此处 lodding
始终为 false
,无法重新渲染,改为 initialState
正常
修复
const menus = useMemo(
() => patchMenus(getMenuDataFromRoutes(_routes[0].routes), initialInfo),
[loading],
);
https://github.com/umijs/plugins/blob/master/packages/plugin-access/src/utils/runtimeUtil.ts#L7
直接修改 routes
导致 getMenuFromRoute
中 memoize-one
接收到的参数始终相同,从而无法触发 formatter
执行,从而导致菜单栏始终无法重新渲染
修复
const resultRoutes: Routes = [].concat(routes as any).map(resultRoute => {
return {
...resultRoute,
routes: resultRoute.routes.map(route => ({ ...route }))},
});
环境和版本:
umi版本: 3.1.2
preset-react版本: 1.4.18
系统: mac os 10.15.3
浏览器: opera 67.0.3575.137
问题
可重重现问题代码
https://github.com/free-pan/umi-project-init/tree/dev
问题重现步骤
详细描述:
const [langArr, setLangArr] = useState([]); // 进行语言切换时 langArr 总是为空数组
useEffect(() => {
console.log('Login组件挂载完毕!'); // 每次进行语言切换, 都会执行这段逻辑
const timeouFlag = setTimeout(() => {
// 动态添加语言信息
const localeMessages = {
'site.title': 'English Title',
'about.title': 'About - Title',
'login.panel': 'User Login',
};
addLocaleByDynamic('en-US', localeMessages);
setLangArr((preValue) => {
console.log('preValue', preValue);
if (preValue.length > 0) {
return preValue;
} else {
return [
{ lang: 'zh-CN', text: '🇨🇳简体中文' },
{ lang: 'en-US', text: '🇺🇸English' },
];
}
});
}, 5000);
return () => clearTimeout(timeouFlag);
}, []);
package.json 如下
"dependencies": {
"@ant-design/pro-layout": "^5.0.7",
"@types/classnames": "^2.2.10",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.0.13",
"classnames": "^2.2.6",
"lint-staged": "^10.0.7",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"umi": "^3.0.13",
"umi-plugin-antd-icon-config": "^2.0.0",
"yorkie": "^2.0.0"
}
config/config.ts 配置如下
import { defineConfig } from 'umi';
import routes from './router';export default defineConfig({
targets: {
ie: 11,
},
locale: {
default: 'zh-CN',
antd: true,
title: true,
baseNavigator: true,
baseSeparator: '-',
},
antd: {},
dva: {hmr: true},
dynamicImport: {
loading: '@/components/PageLoading',
},
title: 'site.title',
routes,
});
locales/zh-CN.ts如下
export default {
'site.title': '测试系统',
}
浏览器tab的title展示为site.title,预期应为 locale/zh-CN.ts 内的“测试系统”
Windows系统:
生成的 src/.umi/plugin-dva/export.ts
如下
export { connect, useDispatch, useStore, useSelector } from 'd:\proj\umi\xxxx\node_modules\dva';
export { getApp as getDvaApp } from './dva';
plugins/packages/plugin-dva/src/index.ts
Line 125 in 3048e71
建议改一下:
}) || winPath(dirname(require.resolve('dva/package.json')));
yarn start
warning in ./node_modules/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '~\node_modules\moment\src\lib\locale'
package.json
{
"private": true,
"scripts": {
"start": "umi dev",
"build": "umi build",
"postinstall": "umi generate tmp",
"prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
"test": "umi-test",
"test:coverage": "umi-test --coverage"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,less,md,json}": [
"prettier --write"
],
"*.ts?(x)": [
"prettier --parser=typescript --write"
]
},
"dependencies": {
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.1.2",
"lint-staged": "^10.0.7",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"umi": "^3.1.2",
"yorkie": "^2.0.0"
},
}
如图所示,在errorConfig.errorPage的数据类型应该是ErrorShowType或者number类型吧.目前为string,导致ts文件会产生异常.同时,下边的拦截器中,默认options: RequestOptionsInit的数据类型无法从Umi中导出,应该也属于bug了
Provide a mini GitHub repository which can reproduce the issue. Use
yarn create @umijs/umi-app
then upload to your GitHub
Steps to reproduce the behavior: 1. 2.
Expected behavior 1. 2.
umi2中页面model是按需加载,权限路由被拦截后,history.listen不会触发。
umi3中页面model是全量加载,权限路由被拦截后,history.listen依然触发。
Warning: The current popular language does not exist, please check the locales folder!
[React Intl] Missing locale data for locale: "undefined". Using default locale: "en" as fallback.
这个要怎么解决呢?locale data数据怎么引入呢,默认只需要整个项目都是中文,但一直不知道怎么解决。。
.umirc.ts
配置如下:
import { defineConfig } from 'umi';
export default defineConfig({
base: '/data', // 子项目配置
qiankun: {
// 子项目配置
slave: {},
},
// 页面的title
title: '首页',
hash: true,
history: {
type: 'browser',
},
routes: [{ path: '/', component: '@/pages/index' }],
dva: {
immer: true,
hmr: false,
},
locale: {
default: 'zh-CN', // 汉化
antd: true,
title: false,
baseNavigator: true,
baseSeparator: '-',
},
cssLoader: {
localsConvention: 'camelCase',
},
nodeModulesTransform: {
type: 'none',
},
targets: {
ie: 11,
},
});
修改配置为
qiankun: {
// 子项目配置
// slave: {},
},
即去掉 slave: {}
,IE11下可以运行,但子应用无法在主应用中运行,报错如图:
子应用中app.js
如下:
function storeTest(props) {
props.onGlobalStateChange((value, prev) => {
console.log(`[onGlobalStateChange ------- ${props.name}]:`, value, prev);
}, true);
}
export const qiankun = {
// 应用加载之前
async bootstrap(props) {
console.log('app1 bootstrap', props);
},
// 应用 render 之前触发
async mount(props) {
console.log('app1 mount', props);
storeTest(props);
},
// 应用卸载之后触发
async unmount(props) {
console.log('app1 unmount', props);
},
};
//pages
DashBoard.menu = {
name: 'DashBoard',
icon:'user'
}
//.umi/core/routes.ts
{
"path": "/DashBoard",
"exact": true,
"component": require('@/pages/DashBoard/index.tsx').default,
"menu": {
"name": "DashBoard",
"icon": "user"
}
//浏览器里
userDashBoard ???
icon 并没有被处理 而是直接返回了字符串;
以下写法也并没有被umi识别处理
icon:()=>;
icon:Icon;
但是不使用icon 收起菜单的效果又很差 ;
想问问是不是我的写法上存在问题;
所有用到 useSelector 的地方都初始值都没了,之前版本还是好的
复现repo: 404-never-shows
安装依赖后,启动yarn start
输入一个完全不存在的url,例如:http://localhost:8000/abcdefg, 页面依旧可以打开,可以看到是因为代码layout/index.tsx,对于不存在的路由,永远可以匹配第一项/
,导致后面通过currentPathConfig
来判断路由是否存在的地方,永远不起作用
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.