My app fails to pile because typescript throws the below error:

Type '{ path: string; exact: true; render: () => Element; }' is not assignable to type 'IntrinsicAttributes
 & IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'.
  Property 'exact' does not exist on type 'IntrinsicAttributes
  & IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'

I'm not sure what's going on, but I'm fairly certain that this issue arose after I installed @types/[email protected] as per a suggestion on Github, but I'm not sure why.

My dependencies:

"dependencies": {
  "@types/react-dom": "^16.9.4",
  "@types/react-router": "^3.0.2",
  "@types/react-router-dom": "^5.1.3",
  "connected-react-router": "^6.7.0",
  "react-dom": "^16.12.0",
  "react-router": "^5.1.2",
  "react-router-dom": "^5.1.2",
}

What's weird is that I checked out of master into a fresh branch and installed @types/react-router, which threw the same error, which is why I'm certain that the error es from this package, however running npm uninstall @types/react-router doesn't get rid of the error. The only way to get my app to pile is to checkout into master, because otherwise the problem persists.

The problem also persists if I install the latest @types/[email protected].

What's going on here?

My app fails to pile because typescript throws the below error:

Type '{ path: string; exact: true; render: () => Element; }' is not assignable to type 'IntrinsicAttributes
 & IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'.
  Property 'exact' does not exist on type 'IntrinsicAttributes
  & IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'

I'm not sure what's going on, but I'm fairly certain that this issue arose after I installed @types/[email protected] as per a suggestion on Github, but I'm not sure why.

My dependencies:

"dependencies": {
  "@types/react-dom": "^16.9.4",
  "@types/react-router": "^3.0.2",
  "@types/react-router-dom": "^5.1.3",
  "connected-react-router": "^6.7.0",
  "react-dom": "^16.12.0",
  "react-router": "^5.1.2",
  "react-router-dom": "^5.1.2",
}

What's weird is that I checked out of master into a fresh branch and installed @types/react-router, which threw the same error, which is why I'm certain that the error es from this package, however running npm uninstall @types/react-router doesn't get rid of the error. The only way to get my app to pile is to checkout into master, because otherwise the problem persists.

The problem also persists if I install the latest @types/[email protected].

What's going on here?

• javascript
• reactjs
• typescript

• Can you take a look at this codesandbox.io/s/r7k106lr8q?file=/src/index.tsx – Maniraj Murugan Commented Apr 13, 2020 at 12:15
• Try updating everything to the latest version: npx npm-check-update -u (this will rewrite your package.json. Also, remove node_modules and package-lock.json and reinstall packages. – Maxim Mazurok Commented Apr 13, 2020 at 12:25

1 Answer 1

if you are using react router v6, it doesn't support exact anymore.

// old - v5 <Route exact path="/" ponent={MyComponent} />

// new - v6 <Route path="/" element={<MyComponent />} />

As stated in their documentation:

You don't need to use an exact prop on anymore. This is because all paths match exactly by default.

You can refer to this migration guide: here