React路由TS报错：Type '{ children: element[];}'与IntrinsicAttributes无共同属性

问题场景 #

配置React应用路由时，Routes.tsx文件出现上述类型错误，相关代码如下：

Routes.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;

Navbar.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;

Home.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;

Orders.tsx #

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

export default Orders;

App.tsx #

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

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

export default App;

解决方案 #

核心问题是组件命名冲突：自定义的组件名为Routes，与react-router-dom导出的Routes组件重名。TypeScript会优先识别自定义组件，导致内部使用的<Routes>被当作无属性的自定义组件，从而抛出类型不匹配错误。

方案一：重命名自定义路由组件 #

1. 将Routes.tsx文件重命名为AppRoutes.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 AppRoutes() {
    return (
        <Router>
            <Navbar />
            <Routes>
                <Route path="/orders" element={<Orders />} />
                <Route path="/" element={<Home />} />
            </Routes>
        </Router>
    )
}

export default AppRoutes;

2. 更新App.tsx中的导入和使用：

import './App.css';
import AppRoutes from './AppRoutes';

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

export default App;

方案二：给第三方组件加别名 #

如果不想修改文件名，可以在导入react-router-dom的Routes时添加别名，避免冲突：

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

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

export default Routes;

内容的提问来源于stack exchange，提问作者Davi Farias