Programing

'exact' 속성이 유형에 없음

c10106 2022. 4. 3. 19:23
반응형

'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

반응형