#reactjs #react-router
#reactjs #react-router
Вопрос:
В Windows npm run start
работает нормально, но npm run start
на m1 выдает ошибку.
Зачем вы это делаете?
Failed to compile
./node_modules/react-router-config/esm/react-router-config.js
Attempted import error: 'Switch' is not exported from 'react-router'.
This error occurred during the build time and cannot be dismissed.
"react-router-dom": "^5.3.0", "react-scripts": "^4.0.1",
Это app.js код.
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import routes from "./Routes";
import {renderRoutes} from "react-router-config";
import theme from './theme';
import {ThemeProvider} from "styled-components";
export default function App() {
return (
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
);
};
``
Комментарии:
1.
Switch
заменено наroutes
, если вы используете react-router v6. Так что проверьте это.
Ответ №1:
Если вы случайно обновились react-router-dom
до версии 6, компонент больше не экспортируется Switch
. Он был заменен Routes
компонентом, который должен непосредственно переносить / отображать Route
компоненты.
- Замените компонент
Switch
наRoutes
компонент.import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; ... function App() { return ( <Router> <Routes> <Route path="/" element={<Home/>} /> </Routes> </Router> ); }
Выполните обновление с версии 5, чтобы перенести ваш проект с версии 5 на версию 6 в вашем приложении, поскольку было довольно много изменений в API компонентов.
- Вернитесь к
react-router-dom
версии 5.- Выполнить
npm un -s react-router-dom
- Выполнить
npm i -s react-router-dom@5.3.0
- Выполнить
Комментарии:
1. У меня есть часть, которую необходимо обновить немедленно, мне действительно нужно перенести? Будут ли ошибки даже со старой версией?
2. @skksks Я бы вернулся к версии 5, пока не буду готов к обновлению, особенно если для этого есть нетривиальная работа.
3.
react-router-dom
это версия 5, но я продолжаю получатьswitch
ошибки.4. Если вы использовали RRDv5, то он, безусловно, должен экспортировать
Switch
компонент. Из каталога вашего проекта запуститеnpm list react-router-dom
, чтобы узнать, какая на самом деле установленная версия. Если вы используете версию 5, убедитесь, что вы остановили / уничтожили все средства просмотра кода / горячие перезагрузки и перезапустили свой сервер разработки.5. Похоже, у вас установлены две версии? Вы работаете в моно-репозитории? Какой бы из них ни был на версии 6, его следует откатить до версии 5, чтобы соответствовать всем обычаям в вашем приложении.
Ответ №2:
Похоже, проблема связана с версией react-router-dom
Написанный вами код, похоже, совместим с version 5
установленным вами пакетом version 6
. Пожалуйста, проверьте.
В version 6
Switch
заменяется наRoutes
- Поведение маршрутов по умолчанию — точное соответствие маршрутам.
component={Loader}
теперь должно быть записано какelement={<Loader />}
useHistory
заменяется наuseNavigate
.- Порядок, в котором мы перечисляем маршруты, не имеет значения. теперь алгоритм выбирает наилучшее возможное соответствие.
Шаги по обновлению до версии 6
npm uninstall react-router-dom
npm install react-router-dom@6
Затем следуйте приведенному ниже руководству, чтобы внести изменения в свой код. Он должен начать работать нормально.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router basename={process.env.PUBLIC_URL}>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/dashboard" element={<Dashboard/>} />
<Route path="/*" element={<NotFoundPage/>} />
</Routes>
</Router>
);
}
Кроме того, рекомендуется использовать basename={process.env.PUBLIC_URL}
для установки общедоступного URL-адреса через .env
file.
Другой способ решить эту проблему
Другим способом было бы вернуться к версии 5, но я настоятельно рекомендую вам перейти на версию 6, поскольку она предлагает меньший размер пакета, лучший выбор маршрута, улучшенный стиль кодирования и гораздо более интуитивно понятный способ кодирования вложенных маршрутов.
Ссылки
Комментарии:
1. У меня есть часть, которую необходимо обновить немедленно, мне действительно нужно перенести? Будут ли ошибки даже со старой версией?
2. Старая версия содержит ошибки. Особенно при обработке 404 маршрутов. У меня были случаи, когда рендеринг двух компонентов для обновления до версии 6 едва ли занимает 30 минут. Я бы сказал, что это стоит времени, поскольку повышает производительность в целом.