1

I am trying to pass in a path variable, userId, as a prop to a React component rendered by React Router:

Profile.js

export const Profile = (props) => {

//array of compatible users fetched for a user.
const [userProfileInformation, setUserProfileInformation] = useState([]);
const [isLoading, setLoading] = useState(true);

useEffect(() => {
    getUserProfileInformation().then(() => {
        setLoading(false);
    });
}, []);

const getUserProfileInformation = async () => {
    //Currently hardcoded value until authorisation implemented.
    const userId = this.props.match.params.id;
    const response = await UserService.getUserProfileInformation(userId)
        .then(response => response.json())
        .then(data => {
            setUserProfileInformation(data);
        });
}

if (isLoading) {
    return (
        <div id="loading">
            <h2>Loading...</h2>
        </div>
    )
}

return (
<div>
    <div className="profileCard">
        <h2>{userProfileInformation.email}</h2>
    </div>
</div>
)

}

The error occurs because of the 'userId = props.match.params.id' code.

App.js:

const root = ReactDOM.createRoot(
document.getElementById("root")

);

root.render(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="/profile/:userId" element={<Profile />} />
        </Routes>
    </BrowserRouter>
);

Dashboard.js:

export const Dashboard = () => {
return(
    <div>
        <h2>Dashboard</h2>
        <Button color="link"><Link to={`/profile/1`}>Profile</Link></Button>
    </div>
);

}

The above temporarily uses a hardcoded value for the link, 1.

Edit:

Tried with const userId = props.match.params.id; and const userId = this.props.match.params.id and const userId = props.match.params.userId; and const userId = this.props.match.params.userId;

All give same result as before.

Thanks

devo9191
  • 219
  • 3
  • 13
  • 1
    You're using `this.props.match.params.id` which should just be `props.match.params.id` (depending on which React Router version you're using). – Chris Aug 05 '22 at 12:53
  • @Chris I have updated the question, I have tried with both this and without this and same result. – devo9191 Aug 05 '22 at 13:04
  • @HasanRiza I have updated the question, I have tried with both id and userId, thanks. – devo9191 Aug 05 '22 at 13:04
  • The particular error would only come when you use `this` because you are using a functional component. It is trying to access `props` in the `this` object, which does not exist. You need to use `props.match.params.userId` and then tell us what the new error is. – Hasan Riza Aug 05 '22 at 13:09
  • @HasanRiza Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params') at getUserProfileInformation (Profile.js:24:1) at Profile.js:17:1 and the line 24 of Profile.js = const userId = props.match.params.userId; – devo9191 Aug 05 '22 at 13:14

1 Answers1

1

The version of react-router-dom you are using is v6. In this version (which has lots of breaking changes you need to keep an eye out for), the params object is not accessible since route props are not passed to the element/component.

In order to access the userId, you now need to use the useParams hook.

  1. Import it: import {useParams} from 'react-router-dom'
  2. In place of const userId = props.match.params.userId, use const { userId } = useParams() and then use it like you did before.

If this answer helps, please accept it. Thanks!

Hasan Riza
  • 469
  • 1
  • 8