Question 214993 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search