代码之家 › 专栏 › 技术社区 › Leonel Matias Domingos

React router error“对象作为React子对象无效…”

react-router-dom react-router reactjs

0

Leonel Matias Domingos · 技术社区 · 4 年前

我从react路由器开始,导出和导入路由。我有 {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”,

提前谢谢

1 回复 | 直到 4 年前

1

Drew Reese 4 年前

在里面 react-router-dom v6 Route 组件的API与v5相比有一些变化。布线组件将在 element 道具 像 ReactElement s ,又名。 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>

2

-1

Eron Cardoso 4 年前

您可以使用React组件导出路由,甚至在索引中这样做。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