react-router-dom 오류

Slack 클론 코딩[실시간 채팅 with React]

폴더 구조와 리액트 라우터

작성

1.9K

수정됨

여기서 react-router-dom에 쓰이는 Switch, Route, Redirect에서 오류가 발생했습니다.

그래서 react-router-dom 버전 문제가 있어서 코드를 바꿔서 진행했습니다.

결론은 여전히 빨간색 오류가 발생하는데 어떤 부분이 오류인지 찾기 힘들어서 여쭤봅니다!!

BrowserRouter 추가하는 것도 오류가 발생합니다

 Its instance type 'BrowserRouter' is not a valid JSX element.
TS2786: 'BrowserRouter' cannot be used as a JSX component.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("C:/Users/user/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

오류메시지입니다

react-router-dom 버전

    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",

클론코딩 typescript react babel Socket.io 웹팩

답변 1

제로초(조현영)

지식공유자

현재 버전은 5버전인데 코드는 6버전코드입니다. 코드를 5버전 코드로 하거나 버전을 6버전으로 올리셔야 합니다.

정이

첫번째 사진의 코드가 5버전이고 두번째 사진의 코드가 6버전 아닌가요?

현재 버전인 5버전으로 했을 때, 버전 문제인가 싶어서 코드를 두 버전으로 작성했을 때의 결과입니다.

코드가 5버전일 때와 6버전일 때 모두 에러가 났습니다...ㅜㅜ

제로초(조현영)

지식공유자

node-modules 폴더 지웠다가 다시 npm i 해서 설치해보세요. 단순 설치 에러 또는 에디터 캐싱문제입니다.

정이

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development",
    "build": "cross-env NODE_ENV=production webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bbb",
  "license": "MIT",
  "dependencies": {
    "@emotion/babel-plugin": "^11.2.0",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@loadable/component": "^5.14.1",
    "@types/gravatar": "^1.8.1",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "autosize": "^4.0.2",
    "axios": "^0.21.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.2",
    "dayjs": "^1.10.4",
    "gravatar": "^1.8.1",
    "react": "^17.0.1",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^17.0.1",
    "react-mentions": "^4.1.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-toastify": "^7.0.3",
    "regexify-string": "^1.0.5",
    "socket.io-client": "^2.4.0",
    "style-loader": "^2.0.0",
    "swr": "^0.4.2",
    "ts-node": "^10.9.1",
    "typescript": "^4.1.5",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.12.16",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "@types/autosize": "^3.0.7",
    "@types/loadable__component": "^5.13.3",
    "@types/node": "^14.14.28",
    "@types/react-custom-scrollbars": "^4.0.7",
    "@types/react-mentions": "^4.1.0",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "@types/socket.io-client": "^1.4.35",
    "@types/webpack": "^4.41.26",
    "@types/webpack-bundle-analyzer": "^3.9.1",
    "@types/webpack-dev-server": "^3.11.1",
    "babel-loader": "^8.2.2",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.3.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "fork-ts-checker-webpack-plugin": "^6.1.0",
    "prettier": "^2.2.1",
    "react-refresh": "^0.14.0",
    "webpack": "^5.22.0",
    "webpack-dev-server": "^4.10.1"
  }
}

node-modules 폴더 지웠다가 다시 npm i 설치 했으나, 같은 에러가 납니다.

package.json을 모두 깃헙 코드 복사 붙여넣기 해서 다시 node-modules 폴더 지웠다가 한겁니다.

그렇게 했을 때, 웹팩에서 에러가 발생하여 npm i -D @pmmmwh/react-refresh-webpack-plugin react-refresh 이것을 다시 설치해야했고,

react-dom도 같은 에러가 발생하여 다시 설치해야하나 생각했고, 다시 설치해도 같은 에러가 발생하였습니다.