Type '{ children element[];}' has no properties in common with type 'IntrinsicAttributes'

user_19785080 0
Viewed 46

I'm trying to create routes to my React application but i'm having problems with this error in my tsx file called "Routes":

"Type '{ children element[];}' has no properties in common with type 'IntrinsicAttributes'.".

In this file i'm importing the Navbar, Home and Orders components.

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;
intrinsicattributes react-router-dom reactjs routes html
1 Answers

You can't have a function named Routes when you are importing Routes component up above from react-router-dom. This is like trying to have two variables of the same name.

To fix, try renaming your component to something else e.g.:

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