无法渲染 react-router-dom 基本功能组件

Question

i'm new to react and started working on a Single page web app with nodejs backend and a simple react with react-bootstrap and react-router-dom front-end, i've learned Functional components and Class Components, everything worked fine for me, until i got this strange error when i try to render a Functional component.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The error is triggered when i try to render this functional component.

 import React, { useState } from 'react' import { Row, Col, Form } from 'react-bootstrap'; export default (props) => { const [clans, setClans] = useState([]); return(<> <div> <Row className="pt-4"> <Col md={12}> <Form.Input type="text" placeholder="Search" /> </Col> </Row> </div> </>); }

and here is where i call for it ( component={Clanes} )

 import React from 'react' import { Route, Switch } from 'react-router-dom'; //paginas import Home from './page/Home'; import NuevoClan from './page/NuevoClan'; import Registrarse from './page/Registrarse'; import Clanes from './page/Clanes'; export default ()=>{ return (<> <Switch> <Route exact={true} path='/' component={Home}/> <Route path='/clanes' component={Clanes}/> // this route can't be rendered <Route path='/nuevoclan' component={NuevoClan}/> <Route path='/registrarse/:clan?' component={Registrarse}/> </Switch> </>); }

It should be noted that I have other functional components in the project with the same structure that render without problems. NuevoClan & Registrarse uses the same functional component structure. Home is a Class component.

i started thinking is a cache problem but i can't find anything related to react cache cleaning

Answer 1

I would triple check this line

import Clanes from './page/Clanes';

Also check the file name of Clanes and the extension. Make sure there isn't a space in the name.

Note: The fragment around the div is unnecessary.

Answer 2

Ok, i feel ashamed. The problem was the component Form.Input does not exists. so it couldn't be rendered and passed to the Route. then i replaced <Form.Input type="text" placeholder="Search" /> to <Form.Control type="text" placeholder="Search" /> and everything was solved