Question

当从一个页面重定向到另一个页面时，如何将prop传递给另一个组件。

当我单击查看按钮时，我想将details状态传递给另一个组件，即{PAGING}，它将在新页面上打开。

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

在按钮上单击我只需要选项卡，然后单击按钮的详细信息并隐藏其他部分

Answer 1

您需要更新一些内容

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

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

因为您只想传递参数，所以您也可能希望在刷新时坚持使用。在这种情况下，最好将其作为参数传递给路径

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

现在，您可以在Movement组件中使用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>
  );
}

Working demo

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

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

并从位置在page.js中使用它

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

Answer 2

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

访问状态：

  this.props.location.state.details

如何在React中从页面路由到另一个页面？

2 个答案: