最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】Preact的路由preact-router无法传递超过3个以上的参数

ReactJS crifan 540浏览 0评论

在调试代码期间,遇到一个奇怪的现象:

在app.js中定义了:

<Router onChange={this.handleRoute} history={browserHistory}>
     <CowshedEditAdd path={`${ROUTE_PREFIX.COWSHED_EDIT_ADD}/:type/:id?/:caller?`} />

对应别处路由调用写的是:

import { Link, route } from ‘preact-router’;
route(`${ROUTE_PREFIX.COW_ADD}/0/COW_ADD`);

其中:

  COW_EDIT            : `${config.routePrefix}/cowEditAdd/1`,
  COW_ADD             : `${config.routePrefix}/cowEditAdd/2`,

然后代码运行后,的确是调用了:

Header render: this.state.curUrl=/uapp/cowEditAdd/2/0/COW_ADD
index.js?5c2a:500 parsePageType: currentUrl=/uapp/cowEditAdd/2/0/COW_ADD -> page=新增牛只

但却是对应着的代码:

src/container/cow/cow-edit-add/index.js

CowEditAdd的constructor

export default class CowEditAdd extends Component {
  constructor(props) {
    let logStr = `type=${this.props.type},id=${this.props.id},caller=${this.props.caller}`;
    console.log(logStr);

无法调用到,对应的页面无法加载:

去看了看对应的解释:

developit/preact-router: URL router for Preact.

<Router>
  <A path=”/” />
  <B path=”/b” id=”42″ />
  <C path=”/c/:id” />
  <C path=”/d/:optional?/:params?” />
  <D default />
</Router>

是可以以这种方式传递参数才对的啊

去看看:

react router multiple params

是否有其他写法

How to do multiple optional params with react-router? · Issue #2762 · ReactTraining/react-router

reactjs – Multiple params with React Router – Stack Overflow

path=”/user/manage(/:id)(/:type)”

react-router的写法还是和preact-router不一样

Multiple optional segments · Issue #929 · ReactTraining/react-router

Multiple params in one route · Issue #112 · relay-tools/react-router-relay

reactjs – Using multiple params with React Router? – Stack Overflow

试试:

            <CowshedEditAdd path={`${ROUTE_PREFIX.COWSHED_EDIT_ADD}/:type/:id/:caller`} />

结果问题依旧。

去看看:

https://github.com/developit/preact-router.git

的源码中,route是否支持超过2个或3个的参数?

看了半天还是没有完全看懂。

总体感觉,算是属于这个库的bug。算了,不继续折腾了。

换成另外的办法,去解决参数传递吧。

但是诡异的是,我另外一个类,是可以接受三个参数的啊:

  DEVICE_BIND         : `${config.routePrefix}/bindDeviceCow`, // no acture path
  DEVICE_BIND_DEVICE  : `${config.routePrefix}/bindDeviceCow/1`,
  DEVICE_BIND_COW     : `${config.routePrefix}/bindDeviceCow/2`,
         <BindDeviceCow path={`${ROUTE_PREFIX.DEVICE_BIND}/:type/:deviceCode?/:cowCode?`} />

后来的后来才发现:

奶奶的,原来是自己眼花了,看错代码了,应该去修改CowEditAdd,结果去修改了CowshedEditAdd了。。。。

所以去改为:

               {/* <CowEditAdd path={`${ROUTE_PREFIX.COW_EDIT_ADD}/:type/:id?`} /> */}
            <CowEditAdd path={`${ROUTE_PREFIX.COW_EDIT_ADD}/:type/:id?/:caller?/:callerPara1/:callerPara2?`} />
            <CowshedManagement path={ROUTE_PREFIX.COWSHED_MANAGEMENT} />
            <CowshedEditAdd path={`${ROUTE_PREFIX.COWSHED_EDIT_ADD}/:type/:id?`} />
            {/* <CowshedEditAdd path={`${ROUTE_PREFIX.COWSHED_EDIT_ADD}/:type/:id?/:caller?/:callerPara1?/:callerPara2`} /> */}
            {/* <CowshedEditAdd path={`${ROUTE_PREFIX.COWSHED_EDIT_ADD}/:type/:id?/:caller?`} /> */}
            {/* <CowshedEditAdd path={`${ROUTE_PREFIX.COWSHED_EDIT_ADD}/:type/:id?/:caller`} /> */}

【总结】

此处preact-router的无法传递超过3个参数的问题:

实际上是不存在的,是自己的笔误,眼花看错了。

实际上是可以的。

相关最终代码是:

  COW_MANAGEMENT      : `${config.routePrefix}/cowManagement`,
  COW_EDIT_ADD        : `${config.routePrefix}/cowEditAdd`, // no acture path
  COW_EDIT            : `${config.routePrefix}/cowEditAdd/1`,
  COW_ADD             : `${config.routePrefix}/cowEditAdd/2`,
            <CowEditAdd path={`${ROUTE_PREFIX.COW_EDIT_ADD}/:type/:id?/:caller?/:callerPara1?/:callerPara2?`} />
route(`${ROUTE_PREFIX.COW_EDIT}/${eachItem.id}/COW_MANAGEMENT`);
<Link href={`${ROUTE_PREFIX.COW_ADD}//COW_MANAGEMENT`} >
      route(`${ROUTE_PREFIX.COW_ADD}//DEVICE_BIND_COW/${deviceCode}`);

类CowEditAdd中即可获得对应的参数:

currentUrl=/uapp/bindDeviceCow/2/888888888888888/牛牛324
BindDeviceCow constructor: type=2,deviceCode=888888888888888,cowCode=牛牛324
CowEditAdd constructor: type=2,id=,caller=DEVICE_BIND_COW,callerPara1=888888888888888,callerPara2=

转载请注明:在路上 » 【已解决】Preact的路由preact-router无法传递超过3个以上的参数

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
59 queries in 0.122 seconds, using 18.88MB memory