Не удается отобразить функциональный компонент react-router-dom basi c - PullRequest
0 голосов
/ 13 июля 2020

Я новичок в реагировании и начал работать над одностраничным веб-приложением с бэкэндом nodejs и простой реакцией с помощью интерфейса response- bootstrap и response-router-dom, я изучил функциональные компоненты и Компоненты класса, у меня все работало нормально, пока я не получил эту странную ошибку при попытке визуализировать функциональный компонент.

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 - это компонент класса.

Я начал думать, что это проблема с кешем, но я не могу найти ничего, связанного с реакцией очистки кеша

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Хорошо, мне стыдно. Проблема заключалась в компоненте Form.Input не существует. поэтому его нельзя было отрендерить и передать в Route. затем я заменил <Form.Input type="text" placeholder="Search" /> на <Form.Control type="text" placeholder="Search" />, и все было решено

0 голосов
/ 13 июля 2020

Я бы трижды проверил эту строку

import Clanes from './page/Clanes';

Также проверьте имя файла Clanes и расширение. Убедитесь, что в имени нет пробела.

Примечание: фрагмент вокруг div не нужен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...