'exact' 속성이 유형에 없음
나는 사용하려고 한다.react-router-dom
내 리액션 앱 안에서도 javascript 대신 typecript를 사용하고 있어.여기서 문제는 내가 내 부품 안에 있는 루트를 수입해서 작동시킬 수 없다는 것이다.이미 설치했음@types/react-router-dom
하지만 어떤 이유에선지 여전히 예상대로 작동하지 않고 있다.
사용하려는 구성 요소react-router-dom
import {BrowserRouter as Router, Route} from "react-router-dom";
const App = () => {
return (
<div>
<Router>
<div>
<Route path="/" exact/>
</div>
</Router>
</div>
)
}
export default App;
그리고 이것이 내가 받는 오류다.
TypeScript error in /Users/veselinkontic/Projects/givellet/frontend/src/components/index.tsx(9,37):
Type '{ path: string; exact: true; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. TS2322
7 | <Router>
8 | <div>
> 9 | <Route path="/" exact/>
| ^
10 | </div>
11 | </Router>
12 | </div>
그리고 이건 내 소포야.모든 것이 거기에 있다는 것을 알 수 있는 json 파일.
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
react 라우터 v6가 지원하지 않음exact
이제 더 이상
// 오래된 - v5<Route exact path="/" component={Home} />
// new - v6<Route path="/" element={<Home />} />
문서에 언급된 바와 같이:
에 정확한 소품을 사용할 필요는 없다.
<Route path="/">
이제 더 이상기본적으로 모든 경로가 정확히 일치하기 때문이다.하위 경로가 있기 때문에 더 많은 URL을 일치시키려면 다음에서처럼 후행 *를 사용하십시오.<Route path="users/*">
.
이 마이그레이션 안내서는 https://reactrouter.com/docs/en/v6/upgrading/v5을 참조하십시오.
나도 같은 문제를 겪었어, 새로운 리액션 로터는exact
키워드<루트 .../>에서 간단히 제거할 수 있으며, 잘 될 것이다.
또한 대신에component
너는 사용해야만 한다element
그리고 요소 태그를 그 안으로 전달한다.
너한테 계속 이런 일이 일어나는지 모르겠어.
하지만 여기엔 다음과 같은 것들이 있다.
"dependencies": {
...
"@types/react-router-dom": "^5.3.2",
...
"react-router-dom": "^6.0.1",
...
},
그리고 아마도 문제는 당신의 react-roouter-dom의 버전과 유형이 같지 않고 호환성 문제를 준다는 것이다.이 도서관은 아직 업데이트되지 않았다.방금 시작한 프로젝트에서도 똑같은 일이 일어났다.
이 문제를 해결하려면 react-router-dom 버전을 v5로 다운그레이드하고 해당 구문에서 작업하거나 유형 업데이트를 기다린 후 최신 버전을 사용하십시오.v6에 중요한 변경 사항이 있으며 코드가 많은 경우 업데이트가 복잡할 수 있다는 점에 유의하십시오.
마찬가지로, 이전의 답도 정확하다.exact
의 새로운 v6에 존재하지 않음react-router
.
여기서 당신은 https://www.npmjs.com/package/@property/properties-dom의 현재 버전을 볼 수 있다.
참조URL: https://stackoverflow.com/questions/69866581/property-exact-does-not-exist-on-type
'Programing' 카테고리의 다른 글
vuex에서 스토어 값을 보는 방법? (0) | 2022.04.03 |
---|---|
정적 인덱스.html 파일에서 react-router BrowserRouter를 사용하는 방법 (0) | 2022.04.03 |
Vue 라우터를 사용하여 경로를 리디렉션하는 방법 (0) | 2022.04.03 |
Vuetify 데이터 테이블 날짜 열을 포맷하는 방법? (0) | 2022.04.03 |
Vue-루터의 DOM 기반 개방형 리디렉션 취약성 (0) | 2022.04.03 |