The rendering method does not work inside the root

Question

The rendering method does not work inside the root in react router dom and only the element works

return (
 <Routes>
    <Route
        path="/"
        exact
        render={() => <Course courses={Courses} />}/> //dose not work
       <Route path="/Login" exact element={<Login />} /> //its work
</Routes>)

Answer 1

In react-router-dom@6 the Route component API changed significantly. There is no longer any component and render and children function props, they were replaced by the single element prop that takes a React.ReactNode, a.k.a. JSX, value.

Route

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

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

In other words, there is no render prop that takes a function.

Notice there is also no longer an exact prop as routes are now always exactly matched in RRDv6. The reason the render function prop existed in RRDv5 was to allow props to be passed to the routed component. Since routed components are rendered as JSX in RRDv6 props can be directly passed.

return (
  <Routes>
    <Route path="/" element={<Course courses={Courses} />} />
    <Route path="/Login" element={<Login />} />
  </Routes>
);