react-router-dom v6 useNavigate passing value to another component

Question

The version of react-router-dom is v6 and I'm having trouble with passing values to another component using Navigate.

I want to pass selected rows to another page called Report. But, I'm not sure I'm using the right syntax for navigate method and I don't know how to get that state in the Report component.

Material-ui Table: I'm trying to use redirectToReport(rowData) in onClick parameter.

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 component

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

Report component

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

Answer 1

Your navigate('/app/report', { state: rowData }); looks correct to me.

react-router-v6

If you need state, use navigate('success', { state }).

navigate

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

Your ReportPage needs to be rendered under the same Router that the component doing the push is under.

Route props are no longer passed to rendered components, as they are now passed as JSX literals. To access route state it must be done so via the useLocation hook.

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

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

If the component isn't able to use React hooks then you still access the route state via a custom withRouter Higher Order Component. Here's an example simple withRouter HOC to pass the location as a prop.

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

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

Then access via props as was done in pre-RRDv6.

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

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

Answer 2

version 6 react-router-dom

I know the question got answered but I feel this might be helpful example for those who want to use functional components and they are in search of passing data between components using react-router-dom v6.

Let's suppose we have two functional components, first component A, second component B. The component A wants to share data to component B.

usage of hooks: (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;

---

Now we will get the data in Component B.

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

 function ComponentB() {

    const location = useLocation();
   
        return (

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

            </>
        )
    }

export default ComponentB;

Note: you can use HOC if you are using class components as hooks won't work in class components.

Answer 3

2 things (just a suggestion): Rather than a ternary use &&

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

Why are you checking location and rendering location.state.name? I would use the check on the data you are fetching or make sure the data returns null or your value.

Answer 4

On Sabaoon Bedar's Answer, you can check if there is any data or not before showing it :

• Instead of this <div>{location.state.name}</div>

• Do this { location != null ? <div>{location.state.name}</div> : ""}