报错 Import declaration conflicts with local declaration of Policy

今天我新建了个页面 ，并将其进入到主页面是报了错

报错原因是：我在代码中有一个命名冲突。具体来说，我再在同一作用域内同时定义和导入了名为 Policy 的东西，导致冲突。

import React from 'react';
import Policy from '@/pages/PolicyPage'; // 导入的模块名为 Policy

const Policy = () => { // 本地定义的变量名也为 Policy
  return <Policy/ >;
};

export default Policy;

解决方法：我重命名了导入的模块，当然也可以重命名本地变量

import React from 'react';
import PolicyPage from '@/pages/PolicyPage'; // 导入的模块名为 Policy

const Policy = () => { // 本地定义的变量名也为 Policy
  return <PolicyPage/ >;
};

export default Policy;

冲突原因：当你导入一个模块并且在同一文件内定义了一个与该模块同名的变量时，JavaScript 引擎无法区分它们，从而导致冲突。当你在一个文件中导入一个模块并定义一个同名的本地变量时，本地变量会覆盖导入的模块。这是因为在 JavaScript 中，后声明的变量会覆盖前面的声明，即使它们是在不同的上下文中导入或定义的。