使用 react router 在 React 中导入路由答案

【问题标题】：Import routes in React with react router使用 react router 在 React 中导入路由
【发布时间】：2022-01-19 14:49:50
【问题描述】：

我从 React 开始，并尝试将路由分成各自的文件。我正在使用反应路由器 v6。

所以我想像这样在我的 routes.jsx 中导入管理路由：

import React from 'react';
import {
  BrowserRouter, Routes, Route,
} from 'react-router-dom';
import AdminRoutes from './admin/adminRoutes';

const routes = () => (
  <BrowserRouter>
    <Routes>
      <AdminRoutes />
      <Route path="/home" element="User template" />
      <Route path="/" element="Login Template" />
      <Route path="/register" element="Register Template" />
    </Routes>
  </BrowserRouter>
);

export default routes;

在我的 adminRoutes.jsx 中有：

import React from 'react';
import { Route } from 'react-router-dom';

const adminRoutes = () => (
  <Route path="admin/*">
    <Route path="countries" element="countries" />
    <Route path="tournaments" element="Tournaments" />
  </Route>
);

export default adminRoutes;

我得到错误：

错误：[adminRoutes] 不是组件。所有组件的孩子必须是或

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

在react-router-dom v6 中，Routes 组件可以仅将Route 或React.Fragment 作为子组件，而Route 组件仅可包含Routes 或其他 Route 组件作为父组件。这是一个不变的 RRDv6 强制执行。

将 adminRoutes 转换为 React 组件并确保路由组件在 element 属性上呈现为 JSX。 React 组件名称使用 PascalCase。将path="/admin/*" 移动到Routes 组件，该组件将呈现此组件。

const AdminRoutes = () => (
  <Routes>
    <Route path="countries" element="countries" />
    <Route path="tournaments" element="Tournaments" />
  </Routes>
);

export default AdminRoutes;

将AdminRoutes 渲染到路由器自己的路由中。

const Routes = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/admin/*" element={<AdminRoutes />} />
      <Route path="/home" element="User template" />
      <Route path="/" element="Login Template" />
      <Route path="/register" element="Register Template" />
    </Routes>
  </BrowserRouter>
);

Demo 打开"/admin/countries" 并呈现“国家”。

【讨论】：

【解决方案2】：

你可以试试这个。导入其他路由时，应使用 Routes 组件进行包装。

import React from 'react';
import {
  BrowserRouter, Routes, Route,
} from 'react-router-dom';
import AdminRoutes from './admin/adminRoutes';

const routes = () => (
  <BrowserRouter>
    <AdminRoutes />
    <Routes>
      <Route path="/home" element="User template" />
      <Route path="/" element="Login Template" />
      <Route path="/register" element="Register Template" />
    </Routes>
  </BrowserRouter>
);

export default routes;

和

import React from "react";
import { Route, Routes } from "react-router-dom";

const adminRoutes = () => (
  <Routes>
    <Route path="admin/*">
      <Route path="countries" element="countries" />
      <Route path="tournaments" element="Tournaments" />
    </Route>
  </Routes>
);

export default adminRoutes;

demo

【讨论】：

嗨，我试过了，现在我有这个错误：错误：AdminRoutes（...）：没有从渲染返回。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。
你能看看我附上的演示吗

【解决方案3】：

这是因为

const adminRoutes = () => (
  <Route path="admin/*">
    <Route path="countries" element="countries" />
    <Route path="tournaments" element="Tournaments" />
  </Route>
);

当你这样做时，你正在创建一个独立的 Component，它经历了 React 组件所做的所有事情，因此 react-router-dom 不接受它。

为了解释，假设您将其视为一个有效选项以用作 Routes 的子项，因为它仅从中返回 <Route/>，但需要注意的一件事是，您可以添加所有hooks 像 useEffect 和所有这一切使它不仅仅是 <Route /> 并且由于这个原因，react-router-dom 不允许它。

您可以做的是，您可以将其导出为React Element，而不是将其导出为React Component，这是允许的。

const AdminRoutes = (<Routes>
    <Route path="countries" element="countries" />
    <Route path="tournaments" element="Tournaments" />
  </Routes>);

export default AdminRoutes;

然后在<Routes></Routes> 中将其用作{AdminRoutes}。

这是一个示例代码 https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/App.js 。转到/te 看看它是否正常工作。

您可以在https://reactjs.org/docs/rendering-elements.html 阅读有关Element 和Component 的更多信息。

Note: Follow the consecutive links to know about component and difference as well.

【讨论】：