标签：used dom Route react 报错 router import 路由

        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>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 { Link, 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>
        <div className="list-group">
          {/* 编写路由链接 导航区的a标签改为Link标签*/}
          <Link className="list-group-item" to="/about">显示About</Link>
          <br />
          <Link className="list-group-item" to="/home">显示Home</Link>
        </div>
        <div className="panel">
          <div className="panel-body">
            {/* 注册路由 展示区写Route标签进行路由的匹配*/}
              <Route path="/about"component={About} />
              <Route path="/home"component={Home} />
          </div>
        </div>
      </div>
    )
  }
}

新的高版本路由写法——除了Link和Route还要引入Routes，包裹在Route外。注意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>
        {/* 编写路由链接 */}
        <div className="list-group">
          <Link className="list-group-item" to="/about">显示About</Link>
          <br />
          <Link className="list-group-item" to="/home">显示Home</Link>
        </div>
        <div className="panel">
          <div className="panel-body">
            {/* 注册路由 */}
            <Routes>
              <Route path="/about" element={<About />} />
              <Route path="/home" element={<Home />} />
            </Routes>
          </div>
        </div>
      </div>
    )
  }
}

标签：used,dom,Route,react,报错,router,import,路由
来源： https://blog.csdn.net/weixin_60463255/article/details/121581160

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。