無法渲染 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" />一切都解決了