Попытка импортировать ошибку: «useRouteMatch» не экспортируется из «act-router-dom » - PullRequest
Новая
       15

Попытка импортировать ошибку: «useRouteMatch» не экспортируется из «act-router-dom »

2 голосов
/ 15 октября 2019

У меня есть эта ошибка, когда я пытаюсь импортировать useRouteMatch из модуляact-router-dom, у меня есть эта ошибка:

Попытка импортировать ошибку: 'useRouteMatch' не экспортируется из'act-router-dom '.

у меня неправильная версия модуляact-router-dom? 

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    useParams
} from "react-router-dom";

Я посмотрел в экспорте модуля, и на самом деле, он не экспортируется. У меня неправильная версия? 

import _BrowserRouter from "./BrowserRouter";
export { _BrowserRouter as BrowserRouter };
import _HashRouter from "./HashRouter";
export { _HashRouter as HashRouter };
import _Link from "./Link";
export { _Link as Link };
import _MemoryRouter from "./MemoryRouter";
export { _MemoryRouter as MemoryRouter };
import _NavLink from "./NavLink";
export { _NavLink as NavLink };
import _Prompt from "./Prompt";
export { _Prompt as Prompt };
import _Redirect from "./Redirect";
export { _Redirect as Redirect };
import _Route from "./Route";
export { _Route as Route };
import _Router from "./Router";
export { _Router as Router };
import _StaticRouter from "./StaticRouter";
export { _StaticRouter as StaticRouter };
import _Switch from "./Switch";
export { _Switch as Switch };
import _generatePath from "./generatePath";
export { _generatePath as generatePath };
import _matchPath from "./matchPath";
export { _matchPath as matchPath };
import _withRouter from "./withRouter";
export { _withRouter as withRouter };

Пожалуйста, помогите, мне нужен ваш мозг:)

Ответы [ 3 ]

2 голосов
/ 16 октября 2019

У меня была такая же проблема, для меня мне просто нужно было обновить используемую мной версию реакции-маршрутизатора.

useRouteMatch был добавлен с помощью реакции-маршрутизатора V5.1 https://reacttraining.com/blog/react-router-v5-1/#useroutematch

Обновите файл package.json до "react-router-dom": "^5.1.2",

Удалите узлы модулей и запустите npm install

0 голосов
/ 21 октября 2019

Крючки нельзя использовать внутри компонента класса. Вы должны рефакторинг вашего кода, чтобы быть функциональным. Используя хуки useState и useEffect, вы по-прежнему можете воспользоваться состоянием уровня компонента и жизненным циклом компонента.

Без полного кода этого компонента я не могу сделать это на вашем примере.

0 голосов
/ 17 октября 2019

Однако у меня есть еще один вопрос, который вы можете помочь. У меня ошибка крючка. Вот мой код, у вас есть идея?

Ошибка: неверный вызов ловушки. Хуки можно вызывать только внутри тела компонента функции.

Вот моя функция рендеринга 

render() {
    let { path, url } = useRouteMatch();
    const Products = this.displayProducts();
    const Edition = this.displayEdition();

    return (
        <div className={this.state.editionProduct ? 'catalog edit' : 'catalog'}>
            <h1>Catalog</h1>
            <Switch>
                <Route exact path={`${path}/list`}>
                    <ul className='catalog-list'>
                        {Products}
                    </ul>
                </Route>
                <Route path={`${path}/edit`}>
                    <Edition
                        saveProductHandler={this.saveProductHandler}
                        closeEdition={this.closeEdition}
                        product={this.state.editionProduct}
                    />
                </Route>
            </Switch>

        </div>
    );
}
...