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

CodePudding user response：

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!