📌  相关文章
📜  Switch' 不是从 'react-router-dom' 导出的 - Javascript (1)

📅  最后修改于: 2023-12-03 14:47:48.673000             🧑  作者: Mango

'Switch' 不是从 'react-router-dom' 导出的 - Javascript

如果您正在使用 React 和 React Router,并且在您的代码中出现了如下错误:

'Switch' is not exported from 'react-router-dom'

这可能是由于您的代码中尝试使用 Switch 组件而没有正确导入它。 Switch 组件是 React Router 的重要组件之一,它可以帮助您在多个路由中选择一个。

要解决此问题,您需要确认您已经正确导入了 Switch 组件。这可以通过在文件开头添加以下行来完成:

import { Switch } from 'react-router-dom';

如果您已经有了这行代码,但仍然看到相同的错误消息,您可以确保它已经正确安装。 这可以通过在终端中销毁和重建 node_modules 目录来完成:

rm -rf node_modules && npm install

这将在你的本地环境中强制更新 node_modules 目录。

还有一种可能,是您可能有多个版本的 React Router 在您的项目中。 这是因为你可能不小心安装了不同的版本之间的冲突。 使用一个 package-lock.json 文件可以避免这种情况。

如果您使用的是 yarn 而不是 npm,请尝试以下命令:

rm -rf node_modules && yarn install

最后,仔细查看您的代码,确保您正确地使用了 Switch 组件。您可以通过是否有一个有效的 Route 组件来测试您的代码。如果没有将 RouteSwitch 组件配对使用,您可能会看到类似于这样的错误消息:

You should not use <Switch> outside a <Router>

利用正确的导入, 安全更新自己的 node_modules 目录,以及正确地使用 SwitchRoute 组件,可以让您更轻松、更愉快地使用 React Router。

注意:以下为代码片段,其中格式标明为markdown


## 代码片段

如果您正在使用 React 和 React Router,并且在您的代码中出现了如下错误:

'Switch' is not exported from 'react-router-dom'


这可能是由于您的代码中尝试使用 `Switch` 组件而没有正确导入它。 `Switch` 组件是 React Router 的重要组件之一,它可以帮助您在多个路由中选择一个。 

要解决此问题,您需要确认您已经正确导入了 `Switch` 组件。这可以通过在文件开头添加以下行来完成:

```js
import { Switch } from 'react-router-dom';

如果您已经有了这行代码,但仍然看到相同的错误消息,您可以确保它已经正确安装。 这可以通过在终端中销毁和重建 node_modules 目录来完成:

rm -rf node_modules && npm install

这将在你的本地环境中强制更新 node_modules 目录。

还有一种可能,是您可能有多个版本的 React Router 在您的项目中。 这是因为你可能不小心安装了不同的版本之间的冲突。 使用一个 package-lock.json 文件可以避免这种情况。

如果您使用的是 yarn 而不是 npm,请尝试以下命令:

rm -rf node_modules && yarn install

最后,仔细查看您的代码,确保您正确地使用了 Switch 组件。您可以通过是否有一个有效的 Route 组件来测试您的代码。如果没有将 RouteSwitch 组件配对使用,您可能会看到类似于这样的错误消息:

You should not use <Switch> outside a <Router>

利用正确的导入, 安全更新自己的 node_modules 目录,以及正确地使用 SwitchRoute 组件,可以让您更轻松、更愉快地使用 React Router。