为什么会收到“路由器可能只有一个子元素”的警告？

React Router Dom 是一组导航组件，它们以声明方式与您的应用程序组合。无论您是想为您的 Web 应用程序提供可收藏的 URL，还是想以可组合的方式在 React Native 中导航，React Router Dom 都适用于这两个地方。我们将考虑现在可用的最新版本的 React-router，即 react-router-dom v5.3.0。

React-router-dom 的特点：

• 更好地支持和优化 React 16。
• 在中不显示任何警告。
• 引入新的上下文 API。
• 全自动发布。
• Bully 向后兼容 react-router-v4。

句法：

import { Route, Link, BrowserRouter as 
        Router } from 'react-router-dom'

    

         

上面的代码片段表示 react-router 是如何工作的。我们首先从 react-router-dom 依赖项中导入所需的标签。请注意，它被写为 BrowserRouter 作为路由器。这样我们就可以使用标签来表示 。 标签是应用程序的路由功能开始的地方。如果在 组件中声明了路径，则该路径可以作为我们可以导航到的 react 应用程序中的新页面访问。为了在中指定路径，我们使用 > 组件，该组件接受一个名为path的参数，正如您从上面的示例中看到的那样。这是我们通过将路径传递给路径参数来创建到新网页的路由的地方。 component 参数用于构成网页在转到 path 参数中指定的路径时将呈现的数据。

注意：路径“/”表示默认路径或首页，表示指定执行后，路由器会将我们路由到应用的起点或应用的首页。要创建自定义路径，只需输入“/pathname”，然后将创建应用程序内新网页的新路径，名称为“pathname”。

React-router 的优点：

• 以标准化结构查看声明有助于我们立即了解我们的应用程序视图
• 延迟加载代码。
• 使用 React-router 的useHistory钩子，我们可以向前和向后导航，甚至可以恢复我们应用程序的状态。
• 我们有能力在从一个页面导航到另一个页面时编写 CSS 转换。
• 提供标准化的应用程序结构。与大型团队合作时非常有帮助。

收到警告/错误的原因：因此，谈到本文的动机，新手开发人员在使用 react-router 时经常会遇到一个非常流行的警告，简称为“路由器可能只有一个孩子”。在了解如何解决此问题之前，让我们了解它发生的原因。通常，基于 React 的环境中的导航用于整个应用程序。这就是为什么像BrowserRouter或Router这样的 React 组件期望只有顶级组件应该包含在其中。因此，当在其中将多条路线列为子路线时，它们将无法工作。

解决方案：但是，此问题的解决方案非常简单。您只需将多个路由包含在

标记或标记中。 标签是两者中最受青睐的标签，因为是唯一的，它能够独占渲染路由。

创建反应应用程序：

第 1 步：要创建一个反应项目，请打开命令提示符并编写以下命令：-

npx create-react-app test

第 2 步：现在通过键入导航到新创建的目录，

cd test

项目结构：它将如下所示。

项目结构

第 3 步：这里我们将只修改App.js文件。此代码段将抛出错误“路由器可能只有一个孩子”，因为您可以看到多个路由已包含在单个标记中，这是不受支持的。

App.js

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
   
function App() {
    return (
    

      
        
          

            
This is child route 1
          
        
        
          

            
This is child route 2
          
        
      
    
    );
}
   
export default App;

第 4 步：这里我们进行了一项重大更改，即现在将多个路由包含在标记中，因此此代码片段将完美运行。

应用程序.js

import React from "react";
import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
  
function App() {
  return (
    

      
        
          
            

              
This is child route 1
            
          
          
            

              
This is child route 2
            
          
        
      
    
  );
}
  
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：

更改路线以显示新网页

这样就可以轻松解决“路由器可能只有一个孩子”的问题。