Блог

В 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>
    );
};
``
 

Если вы случайно обновились react-router-dom до версии 6, компонент больше не экспортируется Switch . Он был заменен Routes компонентом, который должен непосредственно переносить / отображать Route компоненты.

1. Замените компонент 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 компонентов.

2. Вернитесь к react-router-dom версии 5.
   • Выполнить npm un -s react-router-dom
   • Выполнить npm i -s react-router-dom@5.3.0

Похоже, проблема связана с версией react-router-dom Написанный вами код, похоже, совместим с version 5 установленным вами пакетом version 6 . Пожалуйста, проверьте.

В version 6

1. Switch заменяется на Routes
2. Поведение маршрутов по умолчанию — точное соответствие маршрутам.
3. component={Loader} теперь должно быть записано как element={<Loader />}
4. useHistory заменяется на useNavigate .
5. Порядок, в котором мы перечисляем маршруты, не имеет значения. теперь алгоритм выбирает наилучшее возможное соответствие.

Шаги по обновлению до версии 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. Руководство по обновлению до версии 6
2. Обновление до версии v6 Учебное пособие