这里主要讲解 新旧版本 的路由用法： npm i react-router-dom --save并引入模块后编写路由，却报错: A ＜Route＞ is only ever to be used as the child of ＜Routes＞。这是因为react-router-dom^6.0.2高版本的router写法改变。如果想要遵从以前的写法，也可以修改版本依赖为低版本如^4.2.2。如果想适应新版本的写法，解决方法如下。

无论高低版本，src>index.js中引入BrowserRouter并包裹App：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
旧的低版本路由写法——子引入Link和Route，Route外不需要Routes包裹：
 
import React from 'react';
import { NavLink, Route } from 'react-router-dom'
import Home from './component/Home'
import About from './component/About'
export default class App extends React.Component {
  render() {
    return (
        <div className="list-group">
          {/* 编写路由链接 导航区的a标签改为Link标签*/}
              <NavLink activeClassName="active" to="/about">显示About</NavLink>
              <NavLink activeClassName="active" to="/home">显示Home</NavLink>
        <div className="panel">
          <div className="panel-body">
            {/* 注册路由 展示区写Route标签进行路由的匹配 Switch是为了一个path和component一一对应匹配*/}
            <Switch>
              <Route path="/about"component={About} />
              <Route path="/home"component={Home} />
            </Switch>
新的高版本路由写法——除了Link和Route还要引入Routes，包裹在Route外，并且Routes代替了旧版中的Switch实现精准匹配。注意element处的写法与之前component不同：
 
import React from 'react';
import { Link, Routes, Route } from 'react-router-dom'
import Home from './component/Home'
import About from './component/About'
export default class App extends React.Component {
  render() {
    return (
        {/* 编写路由链接 */}
        <div className="list-group">
          <Link className="list-group-item" to="/about">显示About</Link>
          <Link className="list-group-item" to="/home">显示Home</Link>
        <div className="panel">
          <div className="panel-body">
            {/* 注册路由 */}
            <Routes>
              <Route path="/about" element={<About />} />
              <Route path="/home" element={<Home />} />
            </Routes>
                    React 解决 react-router-dom ^6.0.2 报错: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
                    npm i react-router-dom并引入模块后编写路由，却报错: A ＜Route＞ is only ever to be used as the child of ＜Routes＞。这是因为react-router-dom^6.0.2高版本的router写法改变。如果想要遵从以前的写法，也可以修改版本依赖为低版本如^4.2.2。如果想适应新版本的写法，解决方法如下。无论高低版本，src&gt;index.js中引入BrowserRouter并包裹App：import R...
最近把react-router 升级了一下， 在使用react-router-dom 是，子组件使用this.props.history  找不到了，看看官方文档，找了半天也没找到，因为我是在异步执行完后才跳转页面，需要用到push 或者replace，怎么办啊，国内知识都是你复制我的，我复制你的，都特么垃圾。只能去Google，
最终找到了答案：（看代码一目了然）
解决方法
首先使用router
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-d
				
vue 项目：Uncaught Error: [vue-router] “path” is required in a route configuration.
原本自己的代码，因为在调试的时候看到了一行警告
//  警告
vue-router.esm.js?8c4f:16 [vue-router] router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
				
关于 Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
的解决办法
				
今天做练习react路由出现错误，index.tsx:19 Uncaught Error: A  is only ever to be used as the child of  element, nev…
由于路由版本升级，Route需要在Routes组件内，并且component替换成element，括号中变为标签
<Route path="/about" element={} />
<Route path="/home" element={} />
				
文章目录前言一、先准备好要切换的组件二、在 V5 版本则是这样使用v5版本：`Router`直接包裹着`Route组件`三、在V6版本则是这样使用v6版本：`Route`需要先被`Routes`组件包裹，再被路由器包裹，其次把原来的`component`改为`element`，`最后千万不要忘了在element中写成组件形式
提示：在新建react项目中
使用react-router-dom 6.0.1版本难免会遇到以下报错
例如：Error: A  is only ever to be used a
				
问题1：首先必须在键名后面添加一个空格，否则报错
Module build failed: YAMLException: can notread a block mapping entry; a multiline key may not be an implicit key at line6, column 1:
必须是如：name  :'Hello world!'
还有一个可能，如下
					
Uncaught Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendered d
制作简书项目，router报错
import React, { Component } from 'react';
import Header from './common/header';
import { GlobalIcon } from './statics/iconfont/iconfont.js'
import store from './store';
import { Provider } from 'react-redux';
import { Routes, 
v6相比v5,做了很多的优化。包括书写上更加的便捷，更加体现组件化思想。以往在处理路由嵌套和鉴权方面，v5的写法都靠各自开发人员去实现相对比较参差不齐。一下针对v6的配置做简单的介绍。
二、useRoutes
v6中路由的设置采用hook的方式，有点像vue的router的实例化。
import {useRoutes} from "react-router-dom";
import { Suspense, lazy } from 'react'
const routes = [
                React 解决 react-router-dom ^6.0.2 报错: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
                    北北的男孩: 
                    谢谢已解决，
                Uni-app 详情页 播放视频功能
                    鲸叫我照顾海i: 
                    你找到了吗
                Vue 三种常用获取input值的方法
                    情話微甜: 
                    方法2、3都试了。第三种更符合我遇到的问题，解决了很久没好方案，参考第三种完美解决，thank~
                React antd实现走马灯Carousel
                    lzfdecsdn: 
                    图片加载不出来