1

I am having trouble using the EXACT property for my routes, I am using React 18

import { BrowserRouter, Route } from 'react-router-dom';
import Landing from './pages/Landing'
import FanbaseMap from './pages/FanbaseMap'

function Routes() {
  return (
    <BrowserRouter>
      <Route exact path="/">
        <Landing />
      </Route>
      <Route exact path="/map">
        <FanbaseMap />
      </Route>
    </BrowserRouter>
  );
}

Type '{ children: Element; exact: true; path: string; }' is not assignable to type 'IntrinsicAttributes & RouteProps'. Property 'exact' does not exist on type 'IntrinsicAttributes & PathRouteProps'.

I need to create routes that direct to an exact page using React and react-router-dom.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Belmont
  • 11
  • 1

2 Answers2

0

react-router-dom@6 Route components have no exact prop. In fact, in RRDv6 routes and now always exactly matched using a route ranking score.

  1. Correctly render the Route components into the Routes component. Routes is the spiritual successor to the RRDv4/5 Switch component and handles the route matching logic.
  2. Correctly render the routed content on the Route component's element prop. All route content is on the element prop. Only other Route components are valid children in the case of nested routes.
  3. Remove the exact prop since it does nothing.

Example:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Landing from './pages/Landing'
import FanbaseMap from './pages/FanbaseMap'

function AppRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/map" element={<FanbaseMap />} />
      </Routes>
    </BrowserRouter>
  );
}
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
-1

Check version on react-router. React router v6 doesn't support exact anymore. Here is detailed answer: Property 'exact' does not exist on type

Oleksii Sinkov
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 26 '23 at 11:23