React 路由器错误“对象作为 React 子节点无效...”

Question

我从反应路由器开始，导出和导入路由。我 {casaRoutes} 从文件

导入

const routes=[
  <Route path="/casas/create" element={Create} exact key="create" />,
  <Route path="/casas/edit/:id" element={Update} exact key="update" />,
  <Route path="/casas/show/:id" element={Show} exact key="show" />,
  <Route path="/casas/" element={List} exact strict key="list" />,
  <Route path="/casas/:page" element={List} exact strict key="page" />,
];

export default  routes;

但我仍然得到这个错误Objects are not valid as a React child...

如何渲染导入的路由器..

我正在使用“react-router-dom”：“^6.2.1”，

提前致谢

Answer 1

你可以做的是导出你的路由的 React 组件，甚至在你的 index.jsx

中这样做

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
// import your route components too

    render(
      <BrowserRouter>
        <Routes>
          <Route path="/casas/create" element={Create} exact key="create" />,
          <Route path="/casas/edit/:id" element={Update} exact key="update" />,
          <Route path="/casas/show/:id" element={Show} exact key="show" />,
          <Route path="/casas/" element={List} exact strict key="list" />,
          <Route path="/casas/:page" element={List} exact strict key="page" />,
        </Routes>
      </BrowserRouter>,
      document.getElementById("root")
    );

在文档中查找参考资料： https://reactrouter.com/docs/en/v6/getting-started/overview

Answer 2

在 react-router-dom v6 中，Route 组件的 API 与 v5 相比有所变化。路由组件在 element 属性 上呈现为 ReactElements、a.k.a。 JSX.

const routes = [
  <Route path="/casas/create" element={<Create />} key="create" />,
  <Route path="/casas/edit/:id" element={<Update />} key="update" />,
  <Route path="/casas/show/:id" element={<Show />} key="show" />,
  <Route path="/casas/" element={<List />} key="list" />,
  <Route path="/casas/:page" element={<List />} key="page" />,
];

然后一定要导入并渲染到 Routes 组件中。

<Routes>
  {routes}
</Routes>

React 路由器错误“对象作为 React 子节点无效...”

React router error " Objects are not valid as a React child..."

reactjs

react-router

react-router-dom