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"
]
}
}
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 use a trailing * as in<Route path="users/*">.
You can refer to this migration guide: https://reactrouter.com/docs/en/v6/upgrading/v5
I have been through this same issue, the new React-Router doesn't support the exact keyword. You can simply remove it from the <Route .../> and it will work just fine.
Also instead of component you have to use element and pass the element tag into it.
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