Хук useParams при тестировании React компонента выдает undefined, как исправить?

Question

[Alexey]

Есть компонент который получает идентификатор по URL используя хук useParams?

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

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

Есть route к данному компоненту:
<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>,
    );

Проблема в том, что при тестировании - useParams возвращает undefined. Как это исправить?

Answer 1

[Frontend developer]

Вы передаете атрибут path в компонент Router, но нужно передавать этот атрибут в компонент Route

https://v5.reactrouter.com/web/api/Route - по доке есть атрибут path
https://v5.reactrouter.com/web/api/Router - по доке нет атрибута path

также используйте базовый пример из доки:
https://v5.reactrouter.com/web/example/basic

Comments

[Alexey]

Большое спасибо! Это то что я искал!

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

    render(
        <Router history={history}>
            <Route path="/v/:id">
                <SingleVideo />
            </Route>
        </Router>
    );