你的navigate('/app/report', { state: rowData });样子对我来说是正确的。

react-router-v6

如果您需要状态，请使用navigate('success', { state }).

您ReportPage需要在与Router执行推送的组件相同的情况下呈现。

路由props不再传递给渲染组件，因为它们现在作为 JSX 文字传递。要访问路由状态，必须通过useLocation钩子来完成。

function ReportPage(props) {
  const { state } = useLocation();
  console.log(state);

  return (
    <div>
      <div className = "Top3">
        <h3>Top 3 Leads</h3>
          <ReportTop3 leads={[]} />
      </div>
    </div>
  );
}

如果组件无法使用 React 钩子，那么您仍然可以通过自定义的withRouter高阶组件访问路由状态。这是一个简单的withRouterHOC示例，将 传递location为 prop。

const withRouter = WrappedComponent => props => {
  const location = useLocation();

  return <WrappedComponent {...props} location={location} />;
};

然后像在 RRDv6 之前所做的那样通过 props 访问。

function ReportPage(props) {
  console.log(props.location.state);

  return (
    <div>
      <div className = "Top3">
        <h3>Top 3 Leads</h3>
          <ReportTop3 leads={[]} />
      </div>
    </div>
  );
}

版本 6 react-router-dom

我知道这个问题得到了回答，但我觉得这对于那些想要使用功能组件并且他们正在寻找使用 react-router-dom v6 在组件之间传递数据的人来说可能是有用的例子。

假设我们有两个功能组件，第一个组件 A，第二个组件 B。组件 A 想要与组件 B 共享数据。

钩子的用法：（useLocation,useNavigate）

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

现在我们将获取组件 B 中的数据。

import {useLocation} from 'react-router-dom';

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

注意：如果您使用类组件，则可以使用 HOC，因为钩子在类组件中不起作用。

两件事（只是一个建议）：而不是三元使用 &&

{location && <div>{location.state.name}</div>}

为什么要检查位置并渲染 location.state.name？我会检查您正在获取的数据，或确保数据返回 null 或您的值。

在Sabaoon Bedar's Answer 上，您可以在显示之前检查是否有任何数据：

• 而不是这个 <div>{location.state.name}</div>

• 做这个 { location != null ? <div>{location.state.name}</div> : ""}