Umi: rootContainer 与 route access 有冲突

[pgsteven]

尝试加入以下代码到 app.tsx

const Wrapper = ({ children }) => {
  return (
    <div>{children}</div>
  )
}

export function rootContainer(container: any, args: any) {
  return <Wrapper>{container}</Wrapper>;
}

然后Nav的access规则都失效了，有access的页面也能正常访问
某个地方有假定 rootContainer 一定是 RouterComponent 类

[pgsteven]

有没有什么暫时性的解决方法？

[pgsteven]

看来像是 umi preset react 1.7.0 开始就坏掉
查看 1.6.9 没事的 package.json：

    "@umijs/plugin-access": "2.3.1",
    "@umijs/plugin-analytics": "0.2.2",
    "@umijs/plugin-antd": "0.8.0",
    "@umijs/plugin-crossorigin": "1.1.1",
    "@umijs/plugin-dva": "0.9.1",
    "@umijs/plugin-helmet": "1.1.1",
    "@umijs/plugin-initial-state": "2.2.1",
    "@umijs/plugin-layout": "0.12.2",
    "@umijs/plugin-locale": "0.10.3",
    "@umijs/plugin-model": "2.5.4",
    "@umijs/plugin-request": "2.5.0",
    "@umijs/plugin-test": "1.0.0"

1.7.0:

    "@umijs/plugin-access": "2.3.2",
    "@umijs/plugin-analytics": "0.2.2",
    "@umijs/plugin-antd": "0.9.0",
    "@umijs/plugin-crossorigin": "1.2.0",
    "@umijs/plugin-dva": "0.9.1",
    "@umijs/plugin-helmet": "1.1.1",
    "@umijs/plugin-initial-state": "2.3.0",
    "@umijs/plugin-layout": "0.12.5",
    "@umijs/plugin-locale": "0.10.4",
    "@umijs/plugin-model": "2.5.6",
    "@umijs/plugin-request": "2.5.0",
    "@umijs/plugin-test": "1.0.0"

感觉大可能是 plugin-access 更新了導致的
详细：https://github.com/umijs/plugins/compare/@umijs/plugin[email protected]...@umijs/plugin[email protected]

[qykingle]

umi preset react 1.7.4，怎么还没修改后，坐等啊

[laozhu]

access 配置对路由不生效了。

[lzbabd]

遇到同样的问题

[lzbabd]

暂时使用这种方式解决了

const Wrapper = ({ children, routes }) => {
  return React.cloneElement(children, {
    ...children.props,
    routes
  })
}

export function rootContainer(container) {
  return React.createElement(Wrapper, null, container);
}

[xiexingen]

这个不打算处理了么

[saaymeen]

Can confirm, using a rootContainer breaks the use of the access route config. Not documented, had to learn the hard way.

To add to

暂时使用这种方式解决了

const Wrapper = ({ children, routes }) => {
  return React.cloneElement(children, {
    ...children.props,
    routes
  })
}

export function rootContainer(container) {
  return React.createElement(Wrapper, null, container);
}

The Wrapper can be used like this:

const Wrapper = ({ children, routes }) => (
    <CustomComponentWrapper>
        {React.cloneElement(children, {
            ...children.props,
            routes,
        })}
    </CustomComponentWrapper>
);

export function rootContainer(container) {
    return React.createElement(Wrapper, null, container);
}