programing

시도된 가져오기 오류: 'Switch'가 'react-router-dom'에서 내보내지지 않았습니다.

lastcode 2023. 3. 23. 22:46
반응형

시도된 가져오기 오류: 'Switch'가 'react-router-dom'에서 내보내지지 않았습니다.

왜 이 오류가 발생하는지 알 수 없으며, 어디에서도 이에 대한 답을 찾을 수 없습니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★를 제거했습니다.react-router-dom패키징하여 재설치했는데 스위치모듈이 react-flash-dom에서 내보내지 않았음을 나타내는 메시지가 계속 나타납니다.을 사용하다

발생한 오류:

Import 시도 오류: 'Switch'가 'react-router-dom'에서 내보내지 않았습니다.

코드

import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Switch>
          <Route path="/home" component={Home} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

react-router-dom v6에서는 "Switch"가 "Routes" 경로로 대체됩니다.에서 Import를 갱신해야 합니다.

import { Switch, Route } from "react-router-dom";

로.

import { Routes ,Route } from 'react-router-dom';

또한 에서 루트 선언을 갱신해야 합니다.

<Route path="/" component={Home} />

로.

<Route path='/' element={<Home/>} />

react-router-dom에서는 Route 선언에 정확한 것을 사용할 필요도 없습니다.

자세한 내용은 공식 매뉴얼을 참조하십시오.react-router-dom v6로 업그레이드

「 」를 사용하고 react-router-dom, v6, v6처럼 .Switch has has has has has has has has has has has 로 바뀌었습니다.Routes.

이 예에서는 react-router-dom V6을 사용하고 있습니다.

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import '../styles/global.css'

import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'

const App = () => {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

저도 같은 문제에 직면해서 인터넷을 많이 찾아봤지만, 질문에 대한 답변을 받지 못했습니다.

react-router-dom 버전6을 제거했습니다.

npm uninstall react-router-dom

react-router-dom 버전 5.2.0을 설치했습니다.

npm install react-router-dom@5.2.0

구문이 변경되었습니다.

구 구문

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

<Switch>
    <Route path="/home" component={Home} />
</Switch>

새로운 구문:

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

<Routes>
    <Route path="/home" element={<Home/>} />
</Routes>

react-router-dom 버전6 을 사용하고 있는 경우는, 다음과 같이 합니다.

또, https://reactrouter.com/docs/en/v6/upgrading/v5#:~:text=single%20route%20config%3A,//%20This%20is%20a%20React%20Router%20v6%20app,%7D,-This%20step%20을 참조하십시오.

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

Switch에서 Routes로 변경함으로써 수정할 수 있었습니다.그래서 다음과 같은 것이 필요합니다.

<Routes>
  <Route path='/home' element={<Home/>} />
</Routes>

또한 스위치에서 루트로 Import를 변경해야 합니다.

import { Routes, Route } from "react-router-dom";

react-router-dom v6에서는 Switch가 루트로 대체되었습니다.다음 형식을 사용합니다.

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';

<Router>
    <Routes>
        <Route exact path="/" component={component} />
        <Route exact path="/path2" component={component2} />
        <Route exact path="/path3" component={component3} />
    </Routes>
</Router>

react-router-dom는 버전 6으로 업데이트 되었습니다.이것으로 컴포넌트의 이름이 로 변경되었습니다.또한 많은 변화가 있다.

잠시 시간을 내어 설명서를 읽어보십시오.다음은 react-router-v6-doc 링크입니다.

<Switch>에 의해 대체됩니다.<Routes>

이전:

import { Route, Switch} from 'react-router'

<Router>
    <Switch>
        <Route />
        <Route />
    </Switch>
</Router>

지금:

import { Route, Routes} from 'react-router'

<Router>
    <Routes>
        <Route />
        <Route />
    </Routes>
</Router>

Switch 대신 Routes를 사용합니다.

Switch에서 내보냅니다.react-router andreact-router-dom입니다.Route그런 것 같아요).

을 '오류'로했습니다.element.

수신인:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;

으로는 ★★★★★★★★★★★★★★★★★★★★★★★전v6.*:

import React from "react";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login">
           <Login />
        </Route>
       <Route path="/register">
           <Register/>
        </Route>

       <Route path="/">
           <Home/>
        </Route>
      </Switch>
    </Router>
  );
};
export default R;

★★★ v6.*

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;

변경처

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

<Switch>
    <Route path="/home" component={Home} />
</Switch>

로.

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

<Routes>
    <Route path="/home" element={ <Home />} />
</Routes>

react-router-dom에서는 v6 스위치가 루트로 대체됩니다.

그리고 요소가 있는 컴포함

{componentName}과(와) {componentName}

npm으로 하다, 「 」를 실행합니다.npm info react-router-dom version.

패키지 버전이 >= 6.0.0인 경우 변경해야 합니다.

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

로.

import { BrowserRouter as Router,Routes, Route, Link } from "react-router-dom";

그리고 변해야 한다.

<Route path="/home" component={Home} />

로.

<Route path="/home" element={<Home/>} />

순서 1: React 16.8+ 및 react-router-dom v5.2로 업그레이드:

npm uninstall react-router-dom
npm install react-router-dom@5.2

스텝 2: react-router-dom Import 문을 업데이트합니다.

import { Switch, Route } from "react-router-dom"; 삭제:

import { Routes, Route } from 'react-router-dom';

순서 3: 구문을 업그레이드하여 "Switch"를 "Routes"로, "component"를 "Element"로 바꿉니다.

바꾸다

<Switch>
    <Route path="/home" component={HomePage} />
</Switch>

로.

<Routes>
    <Route path="/home" element={<HomePage/>} />
</Routes>

또는 다른 솔루션에서 권장하는 대로 react-router-version을 다운그레이드 할 수도 있습니다.

단, 과거로 되돌리는 것이 아니라 최신 버전의 react-router-dom 및 그 구문으로 업그레이드할 것을 권장합니다.

<Routes><Switch>.

터미널에서 다음을 수행합니다.

npm install --save react-router react-router-dom

이게 도움이 됐어요.또는 파일 패키지를 확인합니다.json 및 바로 뒤에 다음 추가"react-dom": "^17.0.2",:

 "react-router": "^6.0.0",

「 」를 사용하고 react-router-dom.v6 서음음 、 Switch to Routes 。

대신 Importimport { Switch, ... } from 'react-router-dom';

루트 Importimport { Routes, ...} from 'react-router-dom';

''가 '''가 됩니다.component = {ComponentName}, use element={<ComponentName/>}다음과 같이 합니다.

import { Routes, Route, ...} from 'react-router-dom';
    .
    .
    .  
    <Routes>
      <Route exact path='/' element={<Home/>}></Route>
    </Routes>

을 는 react-router-dom 을 .SwitchRoutes하다

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import './App.css';
import Home from './components/Home';

function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" exact element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

리액트 라우터 돔 버전은 무엇입니까?

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

을 삭제하고 .npm install --save.

저도 같은 문제가 있었어요.프로젝트 터미널에서 다음 명령을 입력하십시오.코드를 변경할 필요가 없습니다.

  1. npm uninstall react-router-dom

  2. npm install react-router-dom@5.2.0

스위치는 루트로 대체되었습니다.

업데이트 라우팅 소스(react-router-dom 구문) #1386 (howtographql GitHub)

여기에 이미지 설명을 입력하십시오.

import {
      BrowserRouter as Router,
      Routes,
      Route,
      Link
    } from "react-router-dom";
    
    function App() {
      return (
        <>
        <Router className="App">
          <Navbar/>
          <Routes>
            <Route path='/'>
    
            </Route>
          </Routes>
        </Router>
        </>
      );
    }
    
    export default App;

해결책:

node_modules 폴더를 삭제합니다.패키지 안에.json 파일, react-param-dom 버전(내 경우 버전 6)을 변경합니다."react-router-dom": "^5.2.1"

그런 다음 터미널 실행에서 다음을 수행합니다.

npm install 장치를 npm start 시작하다

나는 이 문제를 다음과 같이 해결했다.

yarn add react-router-dom@5,3,0

이것은, 실제로는, 고객이나 리액트, 또는 코드의 문제가 아닙니다.리액트-라우터-돔의 최신 버전일 뿐이에요루트로 스위치를 교환해 주세요.

바로 그거야.Switch 대신 Routes를 사용하면 정상적으로 동작합니다.

의 새로운 react-router-dom(^6.2.1).<Switch>로.<Routes>및 사용<Route>와 함께component={<SampleComponent />}파라미터를 지정합니다.

특히 아래의 코드 예는 다음과 같습니다.

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import MyComponent from './containers/MyComponent';

export default function AppRoutes() {
    return (
        <Routes>
            <Route exact path="/" component={<MyComponent />}>
            </Route>
        </Routes>
    );
}

인react-router-domv6, 그switch에 의해 대체됩니다.Routes다음으로 간단한 설정 예를 제시하겠습니다.react-router-domv6.

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Layout from './components/Layout';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './pages/LoginPage';
import WizardPage from './pages/WizardPage';
import RequestsPage from './pages/RequestsPage';

import './App.scss'

export class App extends React.Component {
    public render() {
        const sharedRouteProps = { exact: true, authenticationPath: '/login' };
        const wizardRouteProps = { ...sharedRouteProps, path: "/", component: WizardPage };
        const requestsRouteProps = { ...sharedRouteProps, path: "/requests", component: RequestsPage };

        return (
            <Layout>
              <Router>
                <Switch>
                    <Route exact path='/login' component={LoginPage} />
                    <ProtectedRoute {...wizardRouteProps} />
                    <ProtectedRoute {...requestsRouteProps} />
                </Switch>
              </Router>
            </Layout>
        );
    }
}

다음 두 가지 작업만 하면 됩니다.

  1. Switch를 루트로 바꿉니다.
  2. 이 경로 태그 사용
<Route path="/" element={<Component />} />

이것 대신:

<Route>
  path="/"
  <Component />
</Route>

react-router-dom version 6을 사용하는 경우 Switch 대신 Routes를 사용합니다.

언급URL : https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom

반응형

'programing' 카테고리의 다른 글

잭슨과 열거를 역직렬화하는 중  (0) 2023.03.23
Postgre가 소개한 JSONB 설명SQL  (0) 2023.03.23
스프링 부트에서 카페인을 사용하여 캐시별로 다른 사양을 설정할 수 있습니까?  (0) 2023.03.18
HttpPost에서 매개 변수를 사용하는 방법  (0) 2023.03.18
지도 반환 시 어떻게 사용합니까?  (0) 2023.03.18

'programing'의 다른글

  • 현재글시도된 가져오기 오류: 'Switch'가 'react-router-dom'에서 내보내지지 않았습니다.

관련글

댓글

티스토리툴바