-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
BrowserRouter 은 JSX 구성 요소로 사용할 수 없습니다.
23.04.13 15:56 작성 조회수 1.32k
0
-코드-
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를 실행하게되면
위에 오류가 발생됩니다.
답변을 작성해보세요.
1
조현영
지식공유자2023.04.13
BrowserRouter에서 Go to definition 하면 어떤 코드가 뜨나요?? @types/react-router-dom도 5버전이죠??
1
0
sehun910124
질문자2023.04.14
{
"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"
}
}
sehun910124
질문자2023.04.14
BrowserRouter에서 Go to definition 한다는 의미가
BrowserRouter태그 안에 입력을하면될까요?
콘솔창에 입력을해보면될까요
조현영
지식공유자2023.04.14
https://stackoverflow.com/a/75092773
이 문제로 보이고 tsconfig.json의 compilerOptions 내부에 paths 주석을 풀고 저렇게 넣으시면 됩니다.
답변 3