BrowserRouter 은 JSX 구성 요소로 사용할 수 없습니다.
2005
작성한 질문수 10
-코드-
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import axios from 'axios';
import App from './layouts/App';
axios.defaults.withCredentials = true;
axios.defaults.baseURL =
process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090';
render(
<BrowserRouter> //오류발생구간
<App />
</BrowserRouter>,
document.querySelector('#app'),
);
-오류내용-
ERROR in ./client.tsx:15:4
TS2786: 'BrowserRouter' cannot be used as a JSX component.
Its instance type 'BrowserRouter' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/LG gram 15/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
13 |
14 | render(
> 15 | <BrowserRouter>
| ^^^^^^^^^^^^^
16 | <App />
17 | </BrowserRouter>,
18 | document.querySelector('#app'),
sleact (webpack 5.74.0) compiled with 1 error in 9547 ms
백엔드 서버를 킨 상태에서,
npm i 실행하였고
npm run build를 실행하게되면
위에 오류가 발생됩니다.
답변 3
1
"react-router": "^5.2.0" 입니다!0
{
"name": "sleact-ts-front",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve --env development",
"build": "cross-env NODE_ENV=production webpack"
},
"author": "ZeroCho",
"license": "MIT",
"dependencies": {
"@types/react": "^17.0.58",
"@types/react-dom": "^17.0.19",
"axios": "^0.26.1",
"core-js": "^3.15.1",
"cross-env": "^7.0.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"typescript": "^4.4.2"
},
"devDependencies": {
"@babel/core": "^7.13.8",
"@babel/preset-env": "^7.13.8",
"@babel/preset-react": "^7.12.13",
"@babel/preset-typescript": "^7.13.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
"@types/fork-ts-checker-webpack-plugin": "^0.4.5",
"@types/node": "^16.11.26",
"@types/react-router-dom": "^5.1.7",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.0.3",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^4.0.0",
"fork-ts-checker-webpack-plugin": "^7.2.3",
"prettier": "^2.2.1",
"react-refresh": "^0.12.0",
"style-loader": "^3.2.1",
"ts-node": "^10.0.0",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^4.0.0"
}
}
3
https://stackoverflow.com/a/75092773
이 문제로 보이고 tsconfig.json의 compilerOptions 내부에 paths 주석을 풀고 저렇게 넣으시면 됩니다.
기본 셋팅과 관련하여
0
91
1
초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법
0
96
2
focus 시에만 화면 업데이트 되는 이유 + 해결방법
0
148
2
useEffect 개수 관리
0
109
2
라이브러리 서치 방법
0
103
2
함수 정의 패턴
0
77
1
npm run dev 에러
0
152
3
npx webpack 후 에러
0
178
2
'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)
0
142
2
사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')
1
177
2
초기세팅중 packge.json 에러떠요
0
154
2
CORS - Access-Control-Allow-Origin 누락 문제
0
429
3
로그인 페이지 무한 새로고침 현상
0
598
2
Module not found: Error: Can't resolve './App' 에러
0
952
1
배포 방법
0
295
2
npm run dev 시 빌드가 매우 느려졌습니다
0
987
2
alias 경로 설정 오류
0
448
2
fetcher 함수의 data 값이 두번 찍히는 이유
0
274
1
제네릭 질문
0
217
2
ts-node 대신 tsx 사용여부
0
373
1
배포 관련 질문
0
247
1
[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.
0
385
2
[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.
0
336
1
users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.
0
247
2