文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在反应中从页面路由到另一页？

问如何在反应中从页面路由到另一页？
EN

Stack Overflow用户

提问于 2020-05-12 13:13:50

回答 2查看 91关注 0票数 0

如何在从一个页面重定向到另一个组件时将道具传递给另一个组件。

单击“视图按钮”时，我希望将details状态传递给另一个组件，即{分页}，该组件将在新页上打开。

我正在尝试用url <Route path="/detilaing" exact component={PAGING} />打开新页面上的分页组件。

单击按钮，我只想要选项卡和单击按钮详细信息，并隐藏其他部分。

reactjs

react-hooks

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-12 13:27:01

有几件事你需要更新

您的路由器组件应该放在顶层

export default function App() {
  return (
    <Router>
      <Combined />
    </Router>
  );
}

由于您希望通过只是对齐，您可能希望坚持它在刷新。在这种情况下，把它作为路线上的参数传递是个好主意。

<Route path="/detilaing/:ability" exact component={PAGING} />

现在，您可以在运动组件中使用useHistory来获取历史对象并调用history.push。记住，重定向只在呈现组件时起作用，而不是使用事件处理程序。
状态更新反映在下一个呈现周期中，而不是立即。因此，您应该只依赖于函数param来重定向。

  const handleDetails = name => {
    setdetails(name);
    if (name) {
      return history.push(`/detilaing/${name}`);
    } else {
      return history.push(`/`);
    }
  };

分页组件可以从params接收数据并呈现它，或者使用它来获取数据并呈现。这样，数据就会在每条路径的刷新上被无拘无束地呈现出来。

import React from "react";

export default function PAGING({ match }) {
  return (
    <div>
      <p>{match.params.ability}</p>
    </div>
  );
}

工作演示

现在，假设您希望将多个字符串传递给分页组件，并且您不希望在刷新时将其持久化，则可以使用状态传递数据。

history.push({
   pathname: '/detilaing',
   state: { detail }
})

并在page.js中使用它。

export default function PAGING({ location }) {
  return (
    <div>
      <p>{location.state && location.state.detail}</p>
    </div>
  );
}

票数 1

Stack Overflow用户

发布于 2020-05-12 13:20:12

 this.context.router.push({
     pathname: '/detilaing',
     state: {details: this.state.details}  
 })

通过以下方式进入状态：

  this.props.location.state.details

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61752657

复制

相似问题

问如何在反应中从页面路由到另一页？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在反应中从页面路由到另一页？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在反应中从页面路由到另一页？
EN