最新消息:20210917 已从crifan.com换到crifan.org

【基本解决】ReactJS中如何传递多个参数且不在path路径中出现

ReactJS crifan 2447浏览 0评论

折腾:

【已解决】ReactJS中如何实现路由的页面跳转时传递参数

后,需要传递更多参数:

除了id,还有:

current_date

previous_date

并且,也不希望传递到router的path中。

react-router-cn/API.md at master · react-guide/react-router-cn

结果随便去试了试,结果query后加上字典变量:

<Link path={`/breedingProcess/${cow_code}`} query={"current_date":current_date, "previous_date":previous_date}>处理</Link>

结果报错:

react-guide/react-router-cn: React Router 官方文档中文翻译

React Router: Declarative Routing for React.js

试了:

  constructor(props) {
    super(props);
    autoBind(this);
    this.handleIsBreedingChange = this.handleIsBreedingChange.bind(this);
    console.log(this.props.params);
    // console.log(this.props.params.id);
    this.fetchBreedingInfo(this.props.id);
  }

或:

  componentDidMount() {
    console.log(this.props.params);
    // console.log(this.props.params.id);
  }

结果:this.props.params是undefined

Introduction | React Router 中文文档

目前暂时没搞懂,如何传递多个参数。

preact-router  Link pass multiple param

react-router Link pass multiple param

reactjs – Multiple params with React Router – Stack Overflow

去试试:

<BreedingProcess path="/breedingProcess/:id(/:cur_alarm_time)(/:prev_alarm_time)" />
      <Link href={`/breedingProcess/${cow_code}/${current_date}/${previous_date}`}>处理</Link>
  constructor(props) {
    super(props);
    autoBind(this);
    this.handleIsBreedingChange = this.handleIsBreedingChange.bind(this);
    console.log(this.props);
    console.log(this.props.path);
    console.log(this.props.id);
    console.log(this.props.cur_alarm_time);
    console.log(this.props.prev_alarm_time);
    this.fetchBreedingInfo(this.props.id);
  }

结果都是undefined:

但是发现:

其实是传递过去了变量名的

但却是:

cur_alarm_time)(:”1497346674000"

path:"/breedingProcess/:id(/:cur_alarm_time)(/:prev_alarm_time)"

prev_alarm_time):"-1”

url:"/breedingProcess/16-6963/1497346674000/-1"

所以,感觉是去掉括号,或许就可以了。

【总结】

结果果真可以:

          <Router onChange={this.handleRoute}>
。。。
            <BreedingProcess path="/breedingProcess/:id/:cur_alarm_time/:prev_alarm_time" />
          </Router>

父级页面:

function BreedingPendingItem({ data }) {
  const {
    previous_date,
    current_date,
    cow_code,
    cowshed_id
  } = data;
  const formattedCurAlarmTime = formatDate(current_date);
  const formattedPrevAlarmTime = formatDate(previous_date);
  return (
    <div class={style.item}>
      。。。
      <div>
        <div>本次预警:{formattedCurAlarmTime}</div>
        <div>上次预警:{formattedPrevAlarmTime}</div>
      </div>
      <Link href={`/breedingProcess/${cow_code}/${formattedCurAlarmTime}/${formattedPrevAlarmTime}`}>处理</Link>
    </div>
  );
}

子页面:

  constructor(props) {
    super(props);
    autoBind(this);
    this.handleIsBreedingChange = this.handleIsBreedingChange.bind(this);
    console.log(this.props);
    console.log(this.props.path);
    console.log(this.props.id);
    console.log(this.props.cur_alarm_time);
    console.log(this.props.prev_alarm_time);
    this.fetchBreedingInfo(this.props.id);
  }
  //TODO:换成通过牛号获取牛的信息的接口
  fetchBreedingInfo(cow_id) {
    // console.log(cow_id);
    const url = `/cow/cow/search/${cow_id}`;
    // console.log(url);
    this.props.fetch(url, {}, (data) => {
      console.log(data);
      this.setState({
        breedInfoDict : {
          cow_code : data.cow_code,
          cowshed_id : data.cowshed_id,
          cur_alarm_time : this.props.cur_alarm_time,
          prev_alarm_time : this.props.prev_alarm_time
        }
      });
    });
  }

页面显示效果:

即:

虽然是可以实现多参数传递了

但是浏览器路径中,把所有参数都显示出来了。

则是不好的做法。且还有可能是中文,更不好。

终极办法是:

此处,特例,不要传递多个参数,而是传递单个参数,然后通过ID获取对应的信息,即可。

注:我能说,此处写接口的人,本身逻辑不强,导致前端调用很郁闷吗?。。。

【后记】

参考:

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

react-router/app.js at v3 · ReactTraining/react-router

去试试query是否可行。

结果写了:

<BreedingProcess path="/breedingProcess/:id" />

和:

<Link to={{pathname:`/breedingProcess/${cow_code}`, query:{cur_alarm_time: formattedCurAlarmTime, prev_alarm_time:formattedPrevAlarmTime}}}>处理</Link>

但是点击按钮,无法跳转页面了。。。

preact Link to not work

转载请注明:在路上 » 【基本解决】ReactJS中如何传递多个参数且不在path路径中出现

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.187 seconds, using 23.35MB memory