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

Question

react-router-dom 的版本是 v6，我无法使用 Navigate 将值传递给另一个组件。

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

Material-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)
            }
        }]}
    />
)}

LeadTable 组件

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

原文由 Jay Kim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

反应路由器-v6

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

导航

> interface NavigateFunction {
>   (
>     to: To,
>     options?: { replace?: boolean; state?: any }
>   ): void;
>   (delta: number): void;
> }
>
> ```

您的 `ReportPage` 需要在相同的 `Router` 下呈现，即执行推送的组件在其下。

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

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

return (

Top 3 Leads

); }

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

import { useLocation, /* other hooks */ } from ‘react-router-dom’;

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

return ( ); };

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

class ReportPage extends Component {

…

render() { console.log(this.props.location.state);

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

} }

”`

原文由 Drew Reese 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

版本 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，因为钩子在类组件中不起作用。

原文由 Sabaoon Bedar 发布，翻译遵循 CC BY-SA 4.0 许可协议