Question

当我尝试从react-router-dom模块导入useRouteMatch时出现此错误，我有此错误：

尝试导入错误：未从中导出'useRouteMatch' “ react-router-dom”。

我的react-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 };

请帮助，我需要你的大脑：）

Answer 1

我遇到了同样的问题，对我来说，我只需要更新我正在使用的react-router的版本即可。

useRouteMatch已添加到react-router V5.1 https://reacttraining.com/blog/react-router-v5-1/#useroutematch

将您的package.json更新为"react-router-dom": "^5.1.2",

删除节点模块并运行npm install

Answer 2

只需将您的 <!DOCTYPE html> <html> <body> <table> <tr> <th>Id</th> <th>Name</th> </tr> <tbody id="todos"></tbody> </table> <script src="/js/site.js" asp-append-version="true"></script> <script type="text/javascript"> getItems(); </script> </body> </html>版本更新为最新版本。

const uri = 'api/Tests';
let todos = [];

function getItems() {
    fetch(uri)
        .then(response => response.json())
        .then(data => _displayItems(data))
        .catch(error => console.error('Unable to get items.', error));
}
function _displayItems(data) {
    const tBody = document.getElementById('todos');
    tBody.innerHTML = '';
    data.forEach(item => {
        let tr = tBody.insertRow();
        let td1 = tr.insertCell(0);
        let textNode1 = document.createTextNode(item.id);
        td1.appendChild(textNode1);

        let td2 = tr.insertCell(1);
        let textNode2 = document.createTextNode(item.name);
        td2.appendChild(textNode2);


    });

    todos = data;
}

Answer 3

检查react-router-dom的版本应该兼容或大于“ 5.1”，以便可以使用诸如useRouteMatch()，useHistory()之类的钩子。

Answer 4

我解决了将react-router-dom更新到大于5.1的版本

npm install react-router-dom@5.1.2 --save

不要忘记使用npm start重新启动应用程序以查看更改。

Answer 5

但是，我还有另一个问题需要您帮助。我有一个钩子错误。这是我的代码，您有想法吗？

错误：无效的挂接调用。挂钩只能在身体内部使用功能组件。

这是我的渲染功能

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>
    );
}

Answer 6

您不能在基于类的组件内调用挂钩。

render（）{ 让{path，url} = useRouteMatch（）; ... }

Answer 7

不能在类组件内部使用钩子。您应该重构代码以使其正常运行。使用useState和useEffect挂钩，您仍然可以利用组件级状态和组件生命周期。

没有该组件的完整代码，我无法通过您的示例执行此操作。

尝试导入错误：“ useRouteMatch”未从“ react-router-dom”中导出

7 个答案: