React couldn't pass a data from one class component into another using Link

Question

I am trying the pass data to a new page by using Link, in doing so I used the following code.

 <Link
            className="option"
            to={{
              pathname: this.state.pathname,
              state: id
            }}
          >
            <span className="color-primary"> <button style={{ color: "white" }} 
              className="transaction-button"><i className="material-icons" style={{ fontSize: "18px" }}>sync_alt</i> Transaction</button>
            </span>
          </Link>

In the page routed, I tried to handle the data by the following code.

console.log(this.props)

The output is an empty object.

{}

Both pages are class component

Giacomo · Answer 1 · 2021-11-24T09:06:59.230

I assume you are using react-router.

In the first page, where you use <Link>...</Link> you're doing the right thing.

At this point there are two alternatives: you can use function or class to create the component.

IF YOU USE A FUNCTION

In the second page, to take the data you passed, you have to import useLocation:

import { useLocation } from 'react-router';

And then, inside the function, you have to call it and extract the state from it:

const location = useLocation();
console.log(location.state);

Inside location.state you have the state you passed from the previous page.

IF YOU USE A CLASS

In this case, things are little more complicated, but you can use withRouter in order to inject location inside your component props.

So, first of all you need to import PropsTypes and withRouter:

import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

Then you have to write your class like this:

class Child extends React.Component {
    static propTypes = {
        location: PropTypes.object.isRequired,
    };

    render() {
        const { location } = this.props;

        console.log(location.state);

        return {
           <div> ... </div>
        };
    }
}
export withRouter(Child);

In this way inside location.state you have the state you passed from the previous page.

I tried your suggestions, but i get the following error as I am working on a class based component. React Hook "useLocation" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function — danielmuler, Nov 24 '21 at 05:04
In my previous answer I assumed that you are using function instead of classes. Now, the answer is more complete and accurate also if you use class — Giacomo, Nov 24 '21 at 09:07
If the answer was useful, you can accept the answer, so other people that have the same problema you had can find easily the solution — Giacomo, Nov 24 '21 at 11:48

Ester Kaufman · Answer 2 · 2022-05-12T09:38:26.250

If you are using a class, there is no withRouter any more. What happened to withRouter? I need it!

This question usually stems from the fact that you're using React class components, which don't support hooks. In React Router v6, we fully embraced hooks and use them to share all the router's internal state. But that doesn't mean you can't use the router. Assuming you can actually use hooks (you're on React 16.8+), you just need a wrapper.

So, you'll need to create your own wrapper, as shown in the docs.

Here is my implementation, a little more easy-to-use than doc example:

import React from 'react';
import {useLocation, useNavigate, useParams} from 'react-router-dom';

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return <Component {...props} {...{location, navigate, params}} />;
  }

  return ComponentWithRouterProp;
}

export default withRouter;

Use (when exporting your component):

export default withRouter(Link);

More Use-cases Example -> for other people that came here:

Example of loading batch of components wrapped with withRouter, or just your Link component.

const routingList = [{title: 'Home', search: '/', component: Home, icon: 'fa-home'},{...}]

<Routes>
    {
      routingList.map((routing) => {
       let Child = routing.component;
       return <Route key={routing.search} path={routing.search} element={<Child {...routing.compProps} />} />;
     })
    }
    <Route path="/link" element={<Link />} />
</Routes>

And, in your component, you can use:

this.props.location.pathname
this.props.params.paramName

React couldn't pass a data from one class component into another using Link

2 Answers2

IF YOU USE A FUNCTION

IF YOU USE A CLASS