Reactjs react router dom v6 useNavigate将值传递给另一个组件

react router dom的版本是v6，我在使用Navigate将值传递给另一个组件时遇到了问题

我想将所选行传递到另一个名为“报告”的页面。但是，我不确定我是否为

navigate

方法使用了正确的语法，我不知道如何在报表组件中获取该状态

材质ui表：我正在尝试在

onClick

参数中使用

redirectToReport（rowData）

function TableRows(props){
return (
    <MaterialTable
        title="Leads"
        columns={[
            ...
        ]}
        data = {props.leads}       
        options={{
            selection: true,
            filtering: true,
            sorting: true
        }}
        actions = {[{
            position: "toolbarOnSelect",
            tooltip: 'Generate a report based on selected leads.',
            icon: 'addchart',
            onClick: (event, rowData) => {
                console.log("Row Data: " , rowData)
                props.redirect(rowData)
            }
        }]}
    />
)}

功能表行（道具）{
返回(
{
log（“行数据：”，行数据）
props.redirect（rowData）
}
}]}
/>
)}

铅表元件

export default function LeadTable(props) {
let navigate = useNavigate();

const [leads, setLeads] = useState([]);
const [loading, setLoading] = useState(true);    

async function fetchUrl(url) {
    const response = await fetch(url);
    const json = await response.json();

    setLeads(json[0]);
    setLoading(false);
}

useEffect(() => {
    fetchUrl("http://localhost:5000/api/leads");
}, []);

function redirectToReport(rowData) {
    navigate('/app/report', { state: rowData }); // ??? I'm not sure if this is the right way
}

return(
    <div>
        <TableRows leads={leads} redirect={redirectToReport}></TableRows>
    </div>
)}

export default function ReportPage(state) {
return (
    <div>
        { console.log(state) // This doesn't show anything. How to use the state that were passed from Table component here?}
        <div className = "Top3">
          <h3>Top 3 Leads</h3>
            <ReportTop3 leads={[]} />
        </div>
    </div>
);}

导出默认函数LeadTable（道具）{
让导航=使用导航（）；
const[leads，setLeads]=useState（[]）；
const[loading，setLoading]=useState（true）；
异步函数fetchUrl（url）{
const response=等待获取（url）；
const json=await response.json（）；
setLeads（json[0]）；
设置加载（假）；
}
useffect（（）=>{
获取URL（“http://localhost:5000/api/leads");
}, []);
函数重定向到端口（rowData）{
导航（'/app/report'，{state:rowData}）；//？我不确定这是否正确
}
返回(
)}

报表组件

export default function LeadTable(props) {
let navigate = useNavigate();

const [leads, setLeads] = useState([]);
const [loading, setLoading] = useState(true);    

async function fetchUrl(url) {
    const response = await fetch(url);
    const json = await response.json();

    setLeads(json[0]);
    setLoading(false);
}

useEffect(() => {
    fetchUrl("http://localhost:5000/api/leads");
}, []);

function redirectToReport(rowData) {
    navigate('/app/report', { state: rowData }); // ??? I'm not sure if this is the right way
}

return(
    <div>
        <TableRows leads={leads} redirect={redirectToReport}></TableRows>
    </div>
)}

export default function ReportPage(state) {
return (
    <div>
        { console.log(state) // This doesn't show anything. How to use the state that were passed from Table component here?}
        <div className = "Top3">
          <h3>Top 3 Leads</h3>
            <ReportTop3 leads={[]} />
        </div>
    </div>
);}

导出默认函数报告页（状态）{
返回(
{console.log（state）//这没有显示任何内容。如何使用从这里的表组件传递的状态？}
前三名领先者
);}

您的

导航（'/app/report'，{state:rowData}）在我看来是正确的


如果需要状态，请使用
导航（'success'，{state}）

您的
ReportPage
需要在执行推送的组件所在的
路由器下呈现

如果由
路由
组件直接渲染，则将传递路由道具。路由状态仍应位于
位置
对象上

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

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

您的
导航
使用情况看起来正常。
ReportPage
是由
Route
呈现的，还是在与执行路由推送的组件相同的
Router
中呈现的<代码>报告页
仍需要访问路由道具。您能否更新您的问题，以包括您的路线以及如何呈现
ReportPage
？