8000 umi-plugin-routes 路由过滤功能无效 · Issue #686 · umijs/umi · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

umi-plugin-routes 路由过滤功能无效 #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
realeve opened this issue Jul 5, 2018 · 9 comments
Closed

umi-plugin-routes 路由过滤功能无效 #686

realeve opened this issue Jul 5, 2018 · 9 comments

Comments

@realeve
Copy link
realeve commented Jul 5, 2018

1. 配置

根据官方路由配置说明在 .umirc.js 中添加“umi-plugin-routes” 相关设置后

6d8090b9b5199e020f783858ffcf0a8

2.异常信息

对于开发模式中不存在的路由所返回的页面列表中仍将显示过滤掉的路由：
8c0ea00d104889a54e514be2b7e2be8

3.原因分析

在Umi.js生成生成的 /pages/.umi/router.js 文件中向 umi-build-dev/lib/plugins/404/NotFound.js 组件所注入的routes信息并未完全排除所过滤的路由

4.临时解决方案

方案1：修改NotFound页面

在./umi/pages/router.js 文件所引用的 NotFound.js文件中对routes信息过滤，修改 _default函数如下：

var _default = (0, _withRouter.default)(function (_ref) {
  var location = _ref.location,
    pagesPath = _ref.pagesPath;
  let routes = JSON.parse(_ref.routes);
  routes[0].routes = routes[0].routes.filter(item => !(item.component.includes('/components/') || item.component.includes('/services/') || item.component.includes('/models/')));

  var jsFile = (0, _guessJSFileFromPath.default)(location.pathname);
  return _react.default.createElement("div", null, _react.default.createElement("h1", null, "umi development 404 page"), _react.default.createElement("p", null, "There's not a page yet at  ", _react.default.createElement("code", null, location.pathname)), _react.default.createElement("p", null, "Create a React.js component in your pages directory at", ' ', _react.default.createElement("code", null, pagesPath, "/", jsFile), ' ', "and this page will automatically refresh to show the new page component you created."), _react.default.createElement("h2", null, "Page List"), renderRoutes(routes));
});

方案2：手工配置根目录 .umirc.js 中的路由信息，无法享受pages中目录即路由的便捷性。

此处配置发现另一BUG：component的相对路径要以 page/.umi/ 目录为准(../pages/yourRouter)，而不是.umirc.js文件所在的根目录(./src/page/yourRouter/)

export default{
 
  routes: [{
    "path": "/",
    "component": "../layouts/index.js",
    "routes": [{
      "path": "/404",
      "exact": true,
      "component": "../pages/404.js"
    }, {
      "path": "/500",
      "exact": true,
      "component": "../pages/500.js"
    },
    // .... 你的路由配置
  }]
}
@xiaohuoni
Copy link
Member

路由不存在 / 是因为缺少了index.js。在开发的404页面里面可见这些被过滤的路由，但是手动点击跳转，其实还是到开发的404页面，所以这个逻辑是正确的，可以参考例子routes

@realeve
Copy link
Author
realeve commented Jul 7, 2018

@xiaohuoni 我知道 / 路由需要增加 pages/index.js 或者 pages/index/index.js。但这里反映的问题是：

【umi-plugin-routes】这个插件能在.umirc.js中将 components | services | models 目录过滤掉，虽然实际不会渲染出这些路由，但在开发模式的404页面下所渲染出来的列表还是会有 components | services | models 这些选项。

而事实上基于umi.js的官方demo，components | services | models ，这些目录作为系统的保留目录，应该默认就屏蔽不作为二级路由渲染的。

@realeve
Copy link
Author
realeve commented Jul 7, 2018

@xiaohuoni 在 sorrycc/blog#66 中所给出的
image
示例中，会因为 嵌套路由 的设置将 services等目录渲染为路由。

@xiaohuoni
Copy link
Member

你说的是umi-antd-admin吗？
应该是可以正确过滤的。实际访问这些被过滤的路由，也是会被导向到开发的404页面

@xiaohuoni xiaohuoni reopened this Jul 7, 2018
@realeve
Copy link
Author
realeve commented Jul 8, 2018

@xiaohuoni 是的。实际访问 8000 时候会导到404，但在404页面渲染出来的列表(就是我最初反应的那个)中还是会显示出来。而这里的404页面由于是 umi-build-dev 插件生成的，用户在此不可控。

@xiaohuoni
Copy link
Member

那就没有问题了。就是这个逻辑。这个只是开发的404页面。

@huangshunping
Copy link
huangshunping commented Jul 31, 2018 •
edited
Loading

@xiaohuoni 我遇到类似的问题
在添加了动态路由的情况下，会讲components下的内容也加入到404页面。
1）开发模式下的404页面，依然存在未过滤的路由

image

.urirc.js配置如下：
export default { plugins: ['umi-plugin-dva',['umi-plugin-routes', { exclude: [ /components/, /models/, /services/, ], }]], }

另外，page.js是不是有什么特殊的约定，如果我在目录下面增加了page.js，那么动态路由就不生效了

@JevonYang
Copy link

我也遇到相同的问题。

  1. umi-plugin-routes已经写了过滤配置，但是不生效
  2. 在pages根目录下配置了404.js，但是仍然出现的是development 404页。

我看这个项目也是这么配的，但是这个就可以…… https://github.com/umijs/umi-antd-admin

@realeve
Copy link
Author
realeve commented Aug 7, 2018

@JevonYang 开发模式下是这样的，线上版本就是你自己的404

sorrycc added a commit that referenced this issue Jun 23, 2022
@YdreamW @sorrycc
fix: request 请求拦截器格式更改为 umi-request 的格式 (#686)
dbee38e 
* fix: 更改 request interceptors 的格式为 umi-request 的拦截器格式

* docs: 同步文档

* docs: 同步文档

* fix: ts提示用 axios 格式的拦截器，同时兼容 umiRequest 的拦截器。

* docs: 更新 request 文档

* docs: 文档规范 umi@3 umi@4

* Update docs/docs/max/request.md

Co-authored-by: chencheng (云谦) <sorrycc@gmail.com>
xierenyuan pushed a commit to xierenyuan/umi that referenced this issue Jun 23, 2022
@YdreamW @sorrycc
fix: request 请求拦截器格式更改为 umi-request 的格式 (umijs#686)
d097bf9 
* fix: 更改 request interceptors 的格式为 umi-request 的拦截器格式

* docs: 同步文档

* docs: 同步文档

* fix: ts提示用 axios 格式的拦截器，同时兼容 umiRequest 的拦截器。

* docs: 更新 request 文档

* docs: 文档规范 umi@3 umi@4

* Update docs/docs/max/request.md

Co-authored-by: chencheng (云谦) <sorrycc@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@realeve @huangshunping @JevonYang @xiaohuoni
0