Estoy tratando de usar react-router-dom dentro de mi aplicación de reacción y también estoy usando mecanografiado en lugar de javascript. El problema aquí es que no puedo importar Ruta dentro de mi componente y hacer que funcione. Ya instalé @types/react-router-dom pero por alguna razón todavía no funciona como se esperaba.
Este es un componente que intenta usar 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;y este es el error que me sale
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>Y este es mi archivo package.json en el que puedes ver que todo está ahí.
"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" ] } }reaccionar router v6 ya no es compatible con exact .
// antiguo - v5 <Route exact path="/" component={Home} />
// nuevo - v6 <Route path="/" element={<Home />} />
Como se indica en su documentación:
Ya no necesitas usar un accesorio exacto en
<Route path="/">. Esto se debe a que todas las rutas coinciden exactamente de forma predeterminada. Si desea hacer coincidir más de la URL porque tiene rutas secundarias, use un * final como en<Route path="users/*">.
Puede consultar esta guía de migración: https://reactrouter.com/docs/en/v6/upgrading/v5
He pasado por este mismo problema, el nuevo React-Router no admite la palabra clave exact . Simplemente puede eliminarlo de <Route .../> y funcionará perfectamente.
Además, en lugar de component , debe usar el element y pasarle la etiqueta del elemento.
No sé si te sigue pasando esto.
Pero ahí tienes:
"dependencies": { ... "@types/react-router-dom": "^5.3.2", ... "react-router-dom": "^6.0.1", ... },Y tal vez el problema es que la versión de tu react-router-dom y los tipos no son los mismos y dan problemas de compatibilidad. Esta biblioteca aún no ha sido actualizada. Me pasó lo mismo con un proyecto que acabo de empezar.
Para resolver este problema, puede degradar la versión de su react-router-dom a v5 y trabajar bajo esa sintaxis, o esperar la actualización de los tipos y usar la versión más reciente. Tenga en cuenta que hay cambios importantes en v6 y actualizar cuando tiene mucho código podría ser complicado.
Así mismo, las respuestas anteriores son correctas, exact no existe en la nueva v6 de react-router .
Aquí puede ver la versión actual de los tipos: https://www.npmjs.com/package/@types/react-router-dom