解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
react-router-dom在十一月初更新版本至v6，与以往v5在路由中的写法有所改变，如果使用v5的写法但使用v6的版本会出现以下报错

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendereddirectly.Please wrap your <Route> in a <Routes>

如果你出现了这个报错，你可以去package.json中查看react-router-dom的版本，如果你的版本是6.x.x，那这篇文章或许可以帮到你

解决方案：

修改react-router-dom版本回退至v5

npm i react-router-dom@5.3.0

使用官方规定最新语法规则

语法规则展示:

要更换的组件

    function Index() {
      return <h2>主页</h2>;
    }
    function List() {
      return <h2>列表</h2>
    }

V6以前的版本
需要将Route以及div本体都放在Router里，同时使用的组件为component

    function Example() {
      return (
        <Router>
          <ul>
            <li><Link to="/home/">主页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
          </ul>
          <Route path="/home/" exact component={Home} />
          <Route path="/list/" component={List} />
        </Router>
      )
    }

现在的版本
需要将Route放在Routes里，其他元素的位置可以任意放置，灵活性得到增强。组件为element，注意括号内为标签

  function Example() {
    return (
      <div>
        <ul>
          <li><Link to="/home/">主页</Link> </li>
          <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Routes>
          <Route path="/home/" exact element={<Home/>} />
          <Route path="/list/" element={<List/>} />
        </Routes>
      </div>
    )
  }

题外话

react-router-dom是React页面跳转的一个解决方案，在React构建的单页面应用中，如果想在一个新的地址展示新的内容，我们就需要用到路由，即使用react-router-dom或者react-router。
我们为什么要用路由呢？官方的解释是：

React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。

用白话说就是我们在用单页面应用时，也能通过真实的URL去完成对组件的加载控制。这种控制可以让我们能通过URL完成对单页面应用的访问，能让我们更好的处理代码的格式。