最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

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

ReactJS crifan 3341浏览 0评论

对于代码:

  return (
    <div class={style.item}>
      <div>
        <p>牛号:<span>{cow_code}</span></p>
        <p>牛舍:{cowshed_id}</p>
      </div>
      <div>
        <div>本次预警:{formatDate(current_date)}</div>
        <div>上次预警:{formatDate(previous_date)}</div>
      </div>
      <Link href=”/breedingProcess”>处理</Link>
    </div>
  );

希望在跳转到breedingProcess页时,传递几个参数:

cow_code

current_date

previous_date

react js router pass parameter

react js router pass Link parameter

javascript – Pass props in Link react-router – Stack Overflow

How to pass props to components when you use <Route components={{}} /> attribute ? · Issue #4105 · ReactTraining/react-router

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

react router Link path pass params

react router Link path传递参数

reactjs – React Router v4 passing params to component – Stack Overflow

React-router中如何优雅地传复杂的参数 – XGLey的回答 – SegmentFault

preact-router  传递参数

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

此处,是可以解决传递单个参数的事情了:

app.js

  render() {
    const prop = this.props;
    return (
      <div id=”app”>
        。。。
        <div class=”container”>
          <Router onChange={this.handleRoute}>
            <Main path=”/” />
            。。。
            <BreedingProcess path=”/breedingProcess/:id” />
          </Router>
        </div>
        。。。
      </div>
    );

父级的页面index.js

function BreedingPendingItem({ data }) {
  const {
    。。。
    cow_code,
    。。。
  } = data;
  return (
    <div class={style.item}>
。。。
      <Link href={`/breedingProcess/${cow_code}`}>处理</Link>
    </div>
  );

效果:

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

转载请注明:在路上 » 【已解决】ReactJS中如何实现路由的页面跳转时传递参数

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.163 seconds, using 22.15MB memory