#javascript #reactjs #react-router-dom
Вопрос:
После установки последней версии v6 появляется эта ошибка:
Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.
Код хорошо работает для более низких версий, но не работает для версии 6.
Код: index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; ReactDOM.render( lt;Routergt; lt;App /gt; lt;/Routergt;, document.getElementById('root') );
App.js
import React from 'react'; import './style.css'; import { Switch, Route } from 'react-router-dom'; import Home from './Home'; let App = () =gt; { return ( lt;gt; lt;Switchgt; lt;Route path="/" component={Home} /gt; lt;/Switchgt; lt;/gt; ); }; export default App;
Home.js
import React from 'react'; let Home = () =gt; { return lt;h1gt;Homelt;/h1gt;; }; export default Home;
Ответ №1:
В версии 6 маршрутизатор React добавил некоторые важные изменения, и одно из них-они заменили коммутатор маршрутами. Кроме того, вместо component={Home}
этого должно быть element={lt;Home/gt;}
Ответ №2:
В версии 6 коммутатор больше не поддерживается, вместо него используются маршруты. Используйте элемент в качестве атрибута вместо компонента.
lt;Routesgt; lt;Route path="/" exact element={lt;Home /gt;} /gt; lt;/Routesgt;