69
votes

La propriété «exacte» n'existe pas sur le type

J'essaie d'utiliser React-Router-Dom dans mon application React et j'utilise également TypeScript au lieu de JavaScript. Le problème ici est que je ne peux pas importer une route à l'intérieur de mon composant et le faire fonctionner. J'ai déjà installé @ Types / React-Router-Dom mais pour une raison quelconque, cela ne fonctionne toujours pas comme prévu.

Il s'agit d'un composant qui essaie d'utiliser React-Router-Dom

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

Et c'est l'erreur que j'obtiens

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>

reactjs typescript react-router react-router-dom

0 commentaires

4 Réponses :

145
votes

React Router V6 ne prend plus en charge exact .

// old - v5

// Nouveau - V6 } />

comme indiqué dans leur documentation:

Vous n'avez plus besoin d'utiliser un accessoire exact sur . En effet, tous les chemins correspondent exactement par défaut. Si vous Vous voulez faire correspondre plus de l'URL parce que vous avez des routes enfants à utiliser un suivi * comme dans .

Vous pouvez vous référer à ce guide de migration: https://reactrouter.com/docs/ en / v6 / mise à niveau / v5

1 commentaires

Merci d'avoir souligné cela. En outre, un peu frustrant de voir des changements de rupture aussi drastiques sans plus de calendrier pour migrer entre V5 et V6. Littéralement des centaines de fichiers pour certaines personnes.

2
votes

J'ai suivi ce même problème, le nouveau React-Router ne prend pas en charge le mot-clé Exact . Vous pouvez simplement le supprimer de la et cela fonctionnera très bien.

Aussi au lieu de composant , vous devez utiliser élément et passez la balise d'élément.

0 commentaires

0
votes

Je ne sais pas si cela continue de vous arriver.

Mais vous avez là:

"dependencies": {
  ...
  "@types/react-router-dom": "^5.3.2",
  ...
  "react-router-dom": "^6.0.1",
  ...
},

1 commentaires

Ce n'est pas que la bibliothèque de types n'a pas été mise à jour; À partir de V6, React-Router-Dom comprend ses propres déclarations de type et le package @Types n'est plus nécessaire.

0
votes

Dans le cas de React Router V6, j'ajoute des itinéraires et je route vers l'importation.

Exemple:

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;

0 commentaires