类型 \'{ children element[];}\' 与类型 \'IntrinsicAttributes\' 没有共同的属性答案

【问题标题】：Type '{ children element[];}' has no properties in common with type 'IntrinsicAttributes'类型 \'{ children element[];}\' 与类型 \'IntrinsicAttributes\' 没有共同的属性
【发布时间】：2022-08-17 21:19:17
【问题描述】：

我正在尝试创建到我的 React 应用程序的路由，但是我在名为“Routes”的 tsx 文件中遇到了这个错误的问题：

\"类型 \'{ children element[];}\' 没有与类型 \'IntrinsicAttributes\' 相同的属性。\"。

在这个文件中，我正在导入 Navbar、Home 和 Orders 组件。

路线.tsx

import { BrowserRouter as Router, Routes, Route, Link } from \"react-router-dom\";
import Home from \"./Home\";
import Navbar from \"./Navbar\";
import Orders from \"./Orders\";

function Routes() {
    return (
        <Router>
            <Navbar />
            <Routes>
                <Route path=\"/orders\" element={<Orders />} />
                <Route path=\"/\" element={<Home />} />
            </Routes>
        </Router>
    )
}

export default Routes;

导航栏.tsx

import \'./styles.css\';
import { ReactComponent as Logo } from \'./logo.svg\';
import { Link } from \'react-router-dom\';

function Navbar() {
    return (
        <nav className=\"main-navbar\">
            <Logo />
            <Link to=\"/\" className=\"logo-text\">DF Delivery</Link>
        </nav>
    )
}

export default Navbar;

主页.tsx

import \'./styles.css\';
import { ReactComponent as MainImage } from \'./main.svg\';
import Footer from \'../Footer\';
import { Link } from \'react-router-dom\';

function Home() {
    return (
        <>
            <div className=\"home-container\">
                <div className=\"home-content\">
                    <div className=\"home-actions\">
                        <h1 className=\"home-title\">
                            Faça seu pedido <br />
                            que entregamos <br />
                            pra você!!!
                        </h1>
                        <h3 className=\"home-subtitle\">
                            Escolha seu pedido e em poucos minutos <br />
                            levaremos na sua porta.
                        </h3>
                        <Link to=\"/orders\" className=\"home-btn-order\">
                            FAZER PEDIDO
                        </Link>
                    </div>
                    <div className=\"home-image\">
                        <MainImage />
                    </div>
                </div>
            </div>
            <Footer />
        </>
    )
}
export default Home;

订单.tsx

import \'./styles.css\';
 
function Orders() {
    return (
        <div>Orders</div>
    )
}

export default Orders;

应用程序.tsx

import \'./App.css\';
import Routes from \'./Routes\';

function App() {
  return (
    <Routes />
  );
}

export default App;

标签： html reactjs routes react-router-dom intrinsicattributes

【解决方案1】：

当你在上面导入Routes 时，你不能有一个名为Routes 的函数。这就像试图拥有两个同名的变量。

要修复，请尝试将您的组件重命名为其他名称，例如：

function AppRoutes() {
    return (
        <Router>
            <Navbar />
            <Routes>
                <Route path="/orders" element={<Orders />} />
                <Route path="/" element={<Home />} />
            </Routes>
        </Router>
    )
}

【讨论】：