react-router-dom 6

报错 ：    A <Route> is only ever to be used as the child of <Routes>

 

新版本写法改了：

之前版本的 `Route` 需要被 `Routes` 包裹 ， 之前的 `component` 变成了  `element={<Home />} `

import React from "react";
import './index.css'
import { Link, Route, Routes, BrowserRouter } from 'react-router-dom'

import About from "./components/About";
import Home from "./components/Home";


export default class App extends React.Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Link to="/home">to Home</Link>
          <hr></hr>
          <Link to="/about">about</Link>
          <hr></hr>

          <div>
            {/* 注册路由 */}
            <Routes>
              <Route path="/home" element={<Home />} />
              <Route path="/about" element={<About />} />
            </Routes>
          </div>
        </BrowserRouter>
      </div>
    )
  }
}