Ant-design-pro: Router Ignores 3rd level deep paths

[jwmann]

    "/foo/bar": {
      component: dynamicWrapper( app, ["unions"], () => import( "../routes/Foo/Bar" ) )
    },
    "/foo/bar/baz": {
      component: dynamicWrapper( app, ["unions"], () => import( "../routes/Foo/Baz" ) )
    },

When going to /foo/bar/baz it does not render.
This is because of getRoutes(), getRendererArr() and getRelation() inside /src/utils/utils.js

getRelation() checks on .every on the original renderArr compared to the routes.

With these two comparisions:["foo","bar"] => ["foo","bar","baz"]
It does the following:

"foo" === "foo"
"bar" === "bar"
return 2;

It should do the following:

"foo" === "foo"
"bar" === "bar"
undefined === "baz"
return 3;

It doesn't get to the baz and assumes it's the same.
This is a fundamental problem with the router.
Perhaps @chenshuai2144 can give more information since he wrote the code

[jwmann]

My route renders If I change it to this:

    "/foo/bar": {
      component: dynamicWrapper( app, ["unions"], () => import( "../routes/Foo/Bar" ) )
    },
    "/foo/baz": {
      component: dynamicWrapper( app, ["unions"], () => import( "../routes/Foo/Baz" ) )
    },

Unless I'm doing something wrong, I think the router needs to be fixed.

[JoeyKo]

Currently not supported

[chenshuai2144]

We turned off the support for Level 3
you can look https://preview.pro.ant.design/#/list/search/articles
Document has not been translated yet.

[jwmann]

Could you elaborate on the reason for removing it?
I'm trying to set up something like this foo/bar/baz/:id which I assume also doesn't work because of the 3rd level deep restriction

You linked list/search/articles and after checking the router, I see that it has 3rd level deep urls.
How does it work for those routes but not mine? 😕

    '/list/search/projects': {
      component: dynamicWrapper(app, ['list'], () => import('../routes/List/Projects')),
    },
    '/list/search/applications': {
      component: dynamicWrapper(app, ['list'], () => import('../routes/List/Applications')),
    },
    '/list/search/articles': {
      component: dynamicWrapper(app, ['list'], () => import('../routes/List/Articles')),
    },

vs

    "/foo/bar/baz": {
      component: dynamicWrapper( app, ["unions"], () => import( "../routes/Foo/Baz" ) )
    },

[jwmann]

Also, How do I get the :id from the url inside my component?
Like this?

export default connect( ({ list }, { match } }) => {
  const { params } = match;
  return ({
    id: params.id,
    list: list.list
  });
})( SomeComponent );

[chenshuai2144]

You linked list/search/articles and after checking the router

look https://github.com/ant-design/ant-design-pro/blob/master/src/routes/List/List.js

How do I get the :id from the url inside my component?

demo use redux-router function.
you can use react-router function.

[zjxpcyc]

@chenshuai2144 我也遇到了这个让人头痛的问题。为什么会加这个东西？ 出于什么考虑的呢？

我现在的路由定义方式，有点类型 RESTFUL, 或者 表意的 成分，比如 /articles 代表 列表, /articles/2018-01-01 代表 1 号的文章, 这种 URL 很正常的啊， 但是配置 路由的时候就是 因为你们加的这种规则，不适用了。除非，我要舍弃你们整个的路由架构，或者按照你们的约定来加代码，这两种选择都不是我想做的。

我的理解是，这种约定，有点特殊化，或者说有点过度设计的嫌疑。 建议放开这个限制，或者加一个开关来启用，这样比较好。

[jwmann]

@chenshuai2144
This is fine for linking to a page but when you go directly to list/search/articles will it still work?

[ddcat1115]

@zjxpcyc 脚手架中渲染路由的地方使用了 getRoutes()，这个函数主要就是增加筛选和分析 exact 属性，只是为了方便路由的嵌套渲染，这是目前脚手架中最常见的路由组织模式（比如 a/b 这种路由都是在 a 的内部渲染），如果不需要这种筛选和分析，可以不用 getRoutes，直接拿 routerData 自己处理就行