The useParams hook throws undefined when testing a React component, how to fix it?

Question

Software testing

Is there a component that gets an id from a URL using the useParams hook?

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

function SingleVideo() {
    const {id} = useParams();

There is a route to this component: Code used for testing:
<Route path="/v/:id" component={SingleVideo} />

const history = createMemoryHistory()
    const route = `/v/${contentBackup['video-list'][0]['video_id']}`;
    history.push(route)

    render(
        <Router path={`/v/${contentBackup['video-list'][0]['video_id']}`} history={history}>
            <SingleVideo />
        </Router>,
    );

The problem is that when testing - useParams returns undefined. How to fix it?

Answer 1

You are passing the attribute pathto the component Router, but you need to pass this attribute to the component Route
https://v5.reactrouter.com/web/api/Route - there is an attribute on the dock path
https://v5.reactrouter.com/web/api/Router - on docker has no attribute path
also use the basic example from docker:
https://v5.reactrouter.com/web/example/basic