Undefined error when passing data to components-CodePudding

I have two components and I want to passing data to components from the other components. I'm trying with this code but I'm getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'params')

And it is sending the data but it is sending empty. How can I solve this?

front.layout.js

import Profile from '../../Views/profile'

const [user, setUser] = useState({});

 return (
    <>
       <Profile values={user} />
    </>
 )

index.js

import Layout from "../../Components/layouts/front.layout";

const Profile = (props) => {
    const { params } = props.match;
    .
    . 
    .
}

CodePudding user response：

There are a few things to note here:

The following initiates user with an empty object, so you can not destructure from it.

const [user, setUser] = useState({});

Then, you're passing props called values, with the value of user.

So in your container, you can set the default value for params.

const [user, setUser] = useState({ params: {} });

Then in your component you can destructure it (from prop.values)

const Profile = (props) => {
    const { params } = props.values;
    .
    . 
    .
}

CodePudding user response：

You neee to wrap this component with withRouter () function This one you can import like that:

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



export default withRouter (component-name);