How to use either react router useParams() or window.localStorage()

In my scenario , the component should take a value either in the URL or a locale storage but when I attempt to get value from useParams() it throw an error:

Uncaught ReferenceError: useParams is not defined

Really how can I handle this error ?

My code is:

const { userId } = useParams() || props;

How can I fix it?

Solution 1:

I think you didn't import useParams, in which case do so at the top of your file :

import {useParams} from "react-router-dom"

Then do :

let {userId} = useParmas();
if(!userId) userId = props.userId;

Because useParams return an object, an empty object like so {} if there isn't any parameter, but {} is not false, so by doing so useParams() || props, if there isn't an userId parameter in you your url, you will always get undefined.

Solution 2:

Make sure that you have imported useParams. If you have imported it already, then try doing this.

let { userId } = useParams();
if(!userId) userId = props.userId;