I didn't use react for a while and i had to upgrade react-router-dom to new version now it's not working. I think i changed everything i had to to upgrade. Nothing shows up on the screeen its something about path? I tried with "/" "" with or without exact.

import './App.css';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="" component={<p>XD</p>} />
      </Routes>
    </Router>
  );
}

export default App;

CodePudding user response：

use element instead of component

import './App.css';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<p>XD</p>} />
      </Routes>
    </Router>
  );
}

export default App;

CodePudding user response：

In react-router-dom version 6 gone are the Route component's component, and render and children function props, replaced by a single element prop that takes a ReactElement (i.e. JSX literal) as a value. In RRDv6 all routes/paths are now also always exactly matched, so there is no longer an exact prop either.

<Routes> and <Route>

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}

1. Switch to using the element prop to render route content.
2. Remove the exact prop, it is no longer necessary.

Code

<Router>
  <Routes>
    <Route path="/" element={<p>XD</p>} />
  </Routes>
</Router>

To catch up on other changes from v5 see the migration guide.