121

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"
    ]
  }
}
Veselin Kontić
  • 1,638
  • 2
  • 11
  • 23

6 Answers6

259

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/en/main/upgrading/v5

Yan Burtovoy
  • 198
  • 1
  • 2
  • 15
Antonio Pantano
  • 4,592
  • 2
  • 23
  • 26
  • 18
    Thank you for pointing this out. Also, kind of frustrating to see such drastic breaking changes without more of a timeline to migrate between v5 and v6. Literally hundreds of files for some folks. – jmunsch Dec 28 '21 at 08:04
10

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;
H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37
nikolas lutgens
  • 101
  • 1
  • 2
5

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.

Lucas Gabriel
  • 363
  • 3
  • 9
0

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

Pkcarreno
  • 1
  • 3
  • It's not that the type library hasn't been updated; as of v6, react-router-dom includes its own type declarations and the @types package is no longer needed. – DustInComp Nov 13 '21 at 02:59
0

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

Paul Bornuat
  • 1
-1

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

Mr Coolman
  • 29
  • 4
  • 3
    The question is: How did you even start creating routes or facing the problem without the any router component installed ? – Spartacvs1 Nov 08 '22 at 03:31