Question 49578 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to fix my code in react-router-dom v6 – Javascript

My error: No routes matched location "/" history.ts:487

<Route render={(history) => <Search history={history}/>}></Route>

<Routes>
  <Route render={(history) => <Search history={history} />}></Route>
</Routes>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I'm fixed and we don't need history mode. We will use useNavigate instead history.push So code after fixed is :

    <Routes>
  <Route path="/" element={<Search />} /
 </Routes>

  2. 0

    In react-router-dom@6 the Route component renders all content on a single element prop taking a React.ReactNode, i.e. JSX. render is an older RRDv5 prop.

    The Route also needs a path if it isn’t rendering an Outlet (i.e. for nested routes) and needs to participate in route path matching. A root "/" path is required, or a "catch-all" path="*" route needs to also be rendered.

    Example:

    <Routes>
  <Route path="/" element={<Search history={history} />} />
</Routes>

    I suspect you are migrating from react-router@5 and were trying to pass/forward the old v5 route props which don’t exist in v6. Use the appropriate React hooks in the routed component instead. Instead of a history object exposed via a useHistory hook in RRDv5, a navigate function via useNavigate hook replaced it.

    Example:

    import { useNavigate } from 'react-router-dom';

const Search = () => {
  const navigate = useNavigate();

  ...

  // some callback function
  navigate("....");

  ...
};

    <Routes>
  <Route path="/" element={<Search />} />
</Routes>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search