Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Property 'exact' does not exist on type

I am trying to use react-router-dom inside my react app and also I am using typescript instead of javascript. The issue here is that I can’t import Route inside my and make it work. I already installed @types/react-router-dom but for some reason it’s still not working as expected.

This is a component which is trying to sue 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;

And this is the error that I am getting

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>

And this is my package.json file in which you can see that everything is there.

  "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"
    ]
  }
}

>Solution :

react router v6 doesn’t support exact anymore.

// old – v5
<Route exact path="/" component={Home} />

// new – v6
<Route path="/" element={<Home />} />

As stated in their documentation:

You don’t need to use an exact prop on <Route path="/"> anymore.
This is because all paths match exactly by default. If you
want to match more of the URL because you have child routes (see the
<Routes> defined in the Users component above), use a trailing * as
in <Route path="users/*">.

You can refer to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading