渲染方法在根内部不起作用

Question

渲染方法在 React 路由器的根目录中不起作用 dom 只有元素有效

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

Answer 1

在 react-router-dom@6 中，Route 组件 API 发生了显着变化。不再有任何 component 和 render 和 children 函数道具，它们被取而代之的单个 element 道具接受 React.ReactNode，a.k.a. JSX，值。

Route

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

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

换句话说，没有 render prop 接受函数。

请注意，也不再有 exact 属性，因为路由现在始终在 RRDv6 中完全匹配。 RRDv5 中存在 render 函数 prop 的原因是允许将 props 传递给路由组件。由于路由组件在 RRDv6 中被渲染为 JSX，因此可以直接传递 props。

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

渲染方法在根内部不起作用

The rendering method does not work inside the root

react-router-dom