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>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>
    )
  }
}


上一篇:当cds view 是由其它cds view 构成时。找到该cds view上一级的cds view mock数据。


下一篇:编程式路由导航