Property 'exact' does not exist on type
ReactjsTypescriptReact RouterReact Router-DomReactjs Problem Overview
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 component 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 that is trying to use 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
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"
]
}
}
Reactjs Solutions
Solution 1 - Reactjs
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 <Route path="users/*">
.
You can refer to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5
Solution 2 - Reactjs
I have been through this same issue, the new React-Router doesn't support the exact
keyword. You can simply remove it from the
Also instead of component
you have to use element
and pass the element tag into it.
Solution 3 - Reactjs
I don't know if this keeps happening to you.
But there you have:
"dependencies": {
...
"@types/react-router-dom": "^5.3.2",
...
"react-router-dom": "^6.0.1",
...
},
And maybe the problem is that the version of your react-router-dom and the types are not the same and give compatibility problems. This library has not been updated yet. The same thing happened to me with a project that I just started.
To solve this problem, you can downgrade the version of your react-router-dom to v5 and work under that syntax, or wait for the update of the types and use the most recent version. Keep in mind that there are important changes in v6 and updating when you have a lot of code could be complicated.
Likewise, the previous answers are correct, exact
does not exist in the new v6 of react-router
.
Here you can see the current version of the types: https://www.npmjs.com/package/@types/react-router-dom
Solution 4 - Reactjs
in my case , react dom v6 , i add routes and route in import
example :
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from "./pages/Home";
import NewRoom from "./pages/NewRoom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/rooms/new" element={<NewRoom />}/>
</Routes>
</BrowserRouter>
);
}
export default App;