类型上不存在“精确”属性

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

In the case of React Router v6, I add Routes and Route to the 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;

Answer 5

what worked for me was re-installing the package npm install react-router-dom

Answer 6

Just replace exact with end .

Rename <NavLink exact> to <NavLink end> . https://reactrouter.com/en/v6.3.0/upgrading/v5#rename-navlink-exact-to-navlink-end

Answer 7

I found the solution in React-Router docs...

Here is the link to this page section: https://v5.reactrouter.com/web/api/NavLink/style-object-func