使用 React Router 在 React 中导入路由

Question

我从 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] 不是 <Route> 组件。<Routes> 的所有组件子级都必须是 <Route> 或 <React.Fragment>

Answer 1

在react-router-domv6中，组件可以仅Routes具有或作为子组件，仅组件或其他组件作为父组件。这是 RRDv6 强制执行的不变式。 RouteReact.FragmentRouteRoutesRoute

转换adminRoutes为 React 组件并确保路由组件在 prop 上呈现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>
);

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

Answer 2

发生这种情况是因为

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不允许这样做。

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

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

export default AdminRoutes;

然后将其{AdminRoutes}用作<Routes></Routes>.

这是示例代码https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/App.js。去/te看看它的工作原理。

您可以在https://reactjs.org/docs/rendering-elements.htmlElement阅读更多相关内容。Component

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