0

I have the following Router:

root.render(

    <Router history={history}>
        <Routes>
            <Route path='/Page1' element={<Page1/>} />
            <Route path='/Page2' element={<Page2/>} />
        </Routes>
    </Router>

);

Page1 & Page2 are both class components. I'm trying to send the state from /Page1 to /Page 2 using the Link component in React-Router v6. The props I want to send is an object called "participant" available in /Page1.

I have followed this example, but it returns the following error:

Cannot read properties of undefined (reading 'state') at Page2.componentDidMount (Page2.js:142:1)

///////////// Page1

let myParticipant = this.retrieveParticipant(uniqueId); // this function retrieves an object
//...
<Link to="/EditCandidates" state={{myParticipant}} className="btn btn-primary">Edit Candidate</Link>

///////////// Page2

 const {myParticipant} = this.props.location.state;

Someone here remarked that in react-router v6 it only works using useLocation() and that the this.props.location.state is no longer working.

Is there any way to do this in react-router V6 without changing from class component to functional component?

AndrewHoover898
  • 159
  • 1
  • 9
  • 1
    You can either convert class components to function components so they can use the React hooks, or you can create your own [withRouter](https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it) HOC to inject the props for you. See this [answer](https://stackoverflow.com/a/69967902/8690857) for another example. – Drew Reese May 05 '22 at 19:01
  • Do both pages need to be functional components? I converted the component I want to pass the props to into a functional component with Hooks while the component I'm sending the props from remained a class component. When I'm trying to retrieve the data with useLocation() I received the following: "Cannot read properties of null" – AndrewHoover898 May 06 '22 at 16:14
  • 1
    No, React class components and function components can work seamlessly together. Class components can't use React hooks though, so this is why they need to be converted to function components, or need a wrapper component or HOC that is a function component and can use the React hooks and pass props to the class components to use. – Drew Reese May 06 '22 at 16:33
  • I just noticed in your code example here you are using a `Router` and passing a `history` prop. The `react-router-dom@6` `Router` component doesn't take a `history` prop, and all the higher-level routers maintain their own internal history object reference. At this point I can ask that you either edit this question to include a more complete and comprehensive code example and it will get placed in a reopen review queue, or ask a new question with the complete example and your converted code and specific details regarding the passing of the state and it being null in the receiving component. – Drew Reese May 06 '22 at 16:37
  • Just to make things clear, the page I'm calling useLocation() from/the one receiving the state is a functional component (I've re-written it). The page I'm sending it from using Link, as described above, is a class component. The class component is the one sending, the functional component is the one receiving. Is the wrapper still needed in this case or does the problem resides elsewhere? – AndrewHoover898 May 06 '22 at 16:38
  • 1
    No, the `Link` component alone is sufficient enough for sending data on the `state` prop. Perhaps there's an issue with the wrapper/HOC implementation? If you do ask a new question feel free to ping (@ me) me here in a comment with a link to the new post. – Drew Reese May 06 '22 at 16:40
  • Alright, I will formulate a new question and will ping you, thanks. – AndrewHoover898 May 06 '22 at 16:41

0 Answers0