Switch'가 'react-router-dom'에서 내보내지지 않았습니다.

Switch'가 'react-router-dom'에서 내보내지지 않았습니다.

포장되어 있습니다.json file react-module-dom 의존관계가 추가되었습니다.BrowswerRouter로 둘러싸인 앱 컴포넌트입니다만, 스위치로 루트를 래핑하면, 「React-router-dom」에서 「Switch」라고 하는 에러가 표시됩니다.노드 모듈인 package.json.lock을 삭제하고 npm을 다시 설치하고 npm install @babel/core --save를 설치했습니다.아직 안 돼.이걸 위해 6시간을 허비하는 데 성공했어요.이것 좀 고쳐 주시겠어요?왜 Import가 되지 않는 거죠?

Index.js

import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js:

 import logo from './logo.svg';
import './App.css';
import React from 'react';
import {Switch,Route,Link} from 'react-router-dom';
import Home from './Home';
class App extends React.Component {
  componentDidMount(){
    alert('mounting');
  }
  componentDidUpdate(){
    alert('updated');
  }
 render(){
  return (
    
    <div className="App">
     
    <div>
      <Link to="/">Home</Link>
    </div>

    <hr />

    <Switch>
      <Route exact path="/">
        <Home/>
      </Route>
    </Switch>
 
  </div>
 
);
 }
}

export default App;

import React from 'react';

    const Home = () => {
    return <h1>Home</h1>;
  };
  
  export default Home;

패키지.json

"dependencies": {
    "@babel/core": "^7.16.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0",
    "react-router-dom": "^6.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

사용.Routes대신Switch반응 검출 v6에서

사용하고 있습니다.react-router-dom버전 6(Switch를 Routes 컴포넌트로 대체)

import {
  BrowserRouter,
  Routes, // instead of "Switch"
  Route,
} from "react-router-dom";

// ...

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

이제 컴포넌트도 다음 컴포넌트로 전달합니다.element아이들을 이용하는 대신 소품을 사용하세요.

사용하고 싶다면Switchreact-module-dom 버전5 를 인스톨 합니다.리액트 라우터 도메인버전 6에서는 스위치가 교체되었습니다.

npm install react-router-dom@5

사용자는 에서 Switch를 찾을 수 없습니다.react-router-dom. 5 이하의 버전을 설치해야 합니다.아래의 것을 시험해 보세요, 효과가 있을 겁니다.사용자가 Switch 대신 루트를 사용하는 경우 작동하지 않을 수 있습니다.

npm install react-router-dom@5

Switch 대신 "Routes"를 사용하는 react-router@v6를 사용하고 있습니다.솔루션: -"Switch"를 "Routes"로 바꾸거나 npm install react-router-dom@5를 사용하여 리액트 라우터를 v5로 다운그레이드합니다.

https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes 를 체크해 주세요.

이 에러도 발생했습니다만, Import한 React가 삭제되었습니다.따라서 리액션을 Import했는지 여부를 확인해야 할 수도 있습니다.

이 문제는 react-router dom 버전으로 인해 발생합니다.따라서 많은 작업을 수행할 필요가 없으며 오래된 react router dom을 제거하여 새 버전을 설치하면 문제가 해결됩니다.언인스톨 후 리액트 앱 폴더로 이동하여 Shift+우클릭으로 단말기를 열 필요가 없습니다.터미널에서 아래 코드를 실행합니다.리액트 라우터 돔이 제거됩니다.이 'Switch'를 수행하는 방법은 'react-router-dom'에서 내보내지 않습니다.

언급URL : https://stackoverflow.com/questions/69843615/switch-is-not-exported-from-react-router-dom