Ant-design-pro: 路由加入通配符运行时候提示404

Created on 17 Jan 2018  ·  7Comments  ·  Source: ant-design/ant-design-pro

Router 配置是这样写的:
'/projects/edit(/:projectId)': {
component: dynamicWrapper(app, ['project'], () => import('../routes/Project/ProjectEdit')),
},
不管访问 projects/edit 或者 projects/edit/001 都返回的是404

Most helpful comment

你那个projectId是参数吧,路由跳转带参数这样写不觉得麻烦吗?为什么不按照dva的例子来??

import queryString from 'query-string';
this.props.dispatch(routerRedux.push({
    pathname: '/projects/edit',
    search: queryString.stringify({ projectId:'123456'}),
}))

然后在需要接参数的组件里写上:

const {location: { search }} = this.props;
const query = queryString.parse(search);

query就是那个projectId,这样我感觉很好啊!

或者在model里的subscriptions这样接参数

subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, search }) => {
        const query = queryString.parse(search);
        if (pathname === '/projects/edit') {
           //请求数据
        }
     });
  },
},

All 7 comments

现在只支持两级路由!
而且你确定/projects/edit(/:projectId) 是正确的写法?

我是看的这个下面这个文档:
https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteMatching.html

文档里面是这么说的:
路径语法
路由路径是匹配一个(或一部分)URL 的 一个字符串模式。大部分的路由路径都可以直接按照字面量理解,除了以下几个特殊的符号:
`:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
() – 在它内部的内容被认为是可选的

  • – 匹配任意字符(非贪婪的)直到命中下一个字符或者整个 URL 的末尾,并创建一个 splat 参数
<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

如果一个路由使用了相对路径,那么完整的路径将由它的所有祖先节点的路径和自身指定的相对路径拼接而成。使用绝对路径可以使路由匹配行为忽略嵌套关系。`

可能是getRoutes没有匹配()通配符。。。。
我们会尽快排查

试试问题解决了没? #613

你那个projectId是参数吧,路由跳转带参数这样写不觉得麻烦吗?为什么不按照dva的例子来??

import queryString from 'query-string';
this.props.dispatch(routerRedux.push({
    pathname: '/projects/edit',
    search: queryString.stringify({ projectId:'123456'}),
}))

然后在需要接参数的组件里写上:

const {location: { search }} = this.props;
const query = queryString.parse(search);

query就是那个projectId,这样我感觉很好啊!

或者在model里的subscriptions这样接参数

subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, search }) => {
        const query = queryString.parse(search);
        if (pathname === '/projects/edit') {
           //请求数据
        }
     });
  },
},

@longzhaobi 你好,只所以用那个,是因为用 query 传的时候。F5 参数就丢掉了。所以导致就会有问题了。

@xiaopanghhh

this.props.dispatch(routerRedux.push({
    pathname: '/projects/edit',
    search: queryString.stringify({ projectId:'123456'}),
}))

用的search,F5后参数不会丢。他会加到浏览器URL上!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kaoding picture kaoding  ·  3Comments

skyFi picture skyFi  ·  3Comments

zhuanglong picture zhuanglong  ·  3Comments

gaoqiang19514 picture gaoqiang19514  ·  3Comments

lvzheng0404 picture lvzheng0404  ·  3Comments