Ошибка обновления Dom маршрутизатора React — Недопустимый тип элемента: ожидается строка

#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;