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

Question

我是新手，开始使用带有 nodejs 后端的单页 web 应用程序以及与 react-bootstrap 和 react-router-dom 前端的简单反应，我已经学习了功能组件和 Class 组件，一切正常我，直到我尝试渲染功能组件时遇到这个奇怪的错误。

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.

当我尝试渲染此功能组件时触发错误。

 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> </>); }

这就是我需要它的地方（ 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> </>); }

需要注意的是，我在项目中还有其他功能组件具有相同的结构，可以毫无问题地渲染。 NuevoClan & Registrarse使用相同的功能组件结构。 Home是一个 Class 组件。

我开始认为是缓存问题，但我找不到与反应缓存清理相关的任何内容

Answer 1

我会三重检查这条线

import Clanes from './page/Clanes';

还要检查 Clane 的文件名和扩展名。 确保名称中没有空格。

注意：div 周围的片段是不必要的。

Answer 2

好吧，我感到很惭愧。 问题是组件 Form.Input 不存在。 所以它不能被渲染并传递给路由。 然后我将<Form.Input type="text" placeholder="Search" />替换为<Form.Control type="text" placeholder="Search" />一切都解决了