在“react-router-dom”中找不到导出“withRouter”

在“react-router-dom”中找不到导出“withRouter”（导入为“withRouter”）

Export ‘withRouter’ (imported as ‘withRouter’) was not found in ‘react-router-dom’

出现错误“export ‘withRouter’ (imported as ‘withRouter’) was not found in ‘react-router-dom’”是因为该withRouter功能已在 react router v6 中移除。

要解决该错误，5.2.0请通过运行安装 React Router
版本npm install react-router-dom@5.2.0。

在 react router dom 中找不到 export withrouter

解决错误的一种方法是安装5.2.0React Router 版本。

壳


# 👇️ with NPM
npm install react-router-dom@5.2.0 react-router@5.2.0

# 👇️ with YARN
yarn add react-router-dom@5.2.0 react-router@5.2.0

运行命令后，请确保在必要时重新启动开发服务器和 IDE。

或者，使用`useNavigate`最新版本的 React Router 中的钩子

或者，您可以使用useNavigate最新版本的 React Router 中的钩子以编程方式导航。

应用程序.js


// 👇️ import useNavigate
import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

请注意，React Router 版本中的 API6与版本5API 完全不同。

这是一个使用 React Router v6 包的应用程序的最小示例。

应用程序.js


import React from 'react';
// 👇️ import Routes instead of Switch 👇️
import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* 👇️ Wrap your Route components in a Routes component */}
        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

在 React 路由器 v6 中，我们必须将<Switch>组件替换为<Routes>.

在 React Router v6 中，该exactprop 已被删除，您可以按照您希望的任何顺序放置路由，路由器会自动检测当前 URL 的最佳路由。

Route
在 React Router v6 中，我们没有将 children prop 传递给组件，而是使用elementprop，例如
<Route path="/about" element={<About />} />.

应用程序.js


<Route path="/about" element={<About />} />

React router v6 使用简化的路径格式，其中<Route path>有 2 种占位符：

动态:id参数
*通配符

通配符*语法只能用在路径的末尾。

应用程序.js


import React from 'react';
import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom';
import {useParams} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ link to dynamic path */}
              <Link to="/users/4200">Users</Link>
            </li>
            <li>
              {/* 👇️ link to catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        {/* 👇️ Wrap your Route components in a Routes component */}
        <Routes>
          <Route path="/about" element={<About />} />
          {/* 👇️ handle dynamic path */}
          <Route path="/users/:userId" element={<Users />} />
          <Route path="/" element={<Home />} />
          {/* 👇️ only match this when no other routes match */}
          <Route
            path="*"
            element={
              <div>
                <h2>404 Page not found etc</h2>
              </div>
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  const params = useParams();

  return <h2>Users: {params.userId}</h2>;
}

该路由<Route path="/users/:userId" element={<Users />} />使用动态
userId参数，我们可以使用useParams钩子访问它。

该路线将匹配之后的任何内容/users/，例如/users/123或
/users/asdf。

路径等于的路由用作*包罗万象的路由。它仅在没有其他路由匹配时才匹配。

有关更多示例，请参阅

React Router v6 的官方文档页面。

我还写了一篇关于
如何处理 React Router 中未找到的 404 页面的详细指南。

如果您需要
从 React Router 中的 URL 获取 ID，请单击链接并按照说明进行操作。