act-route-dom v6使用Navigate将值传递给另一个组件 [英] react-router-dom v6 useNavigate passing value to another component

问题描述

REACTION-ROUTER-DOM的版本是V6，我在使用导航将值传递给另一个组件时遇到问题。

我希望将所选行传递到另一个名为Report的页面。但是，我不确定我是否为navigate方法使用了正确的语法，并且我不知道如何在报表组件中获取该状态。

物料-界面表：我正在尝试使用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)
            }
        }]}
    />
)}

引导表组件

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>
);}

推荐答案

您的navigate('/app/report', { state: rowData });在我看来是正确的。

react-router-v6

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

您的ReportPage需要在执行推送的组件所在的同一Router下呈现。

路由道具不再传递给呈现组件，因为它们现在作为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>
  );
}

如果组件不能使用Reaction挂钩，那么您仍然可以通过自定义的withRouter更高级别的组件访问路由状态。以下是一个简单的withRouterhoc作为道具传递location的示例。

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

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

然后像在RRDv6之前的版本中一样，通过道具访问。

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

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

这篇关于act-route-dom v6使用Navigate将值传递给另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！