react-路由-新版本新写法

import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";路由
  <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠<a>跳转不同的页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
                            <a className="list-group-item active" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Routes>
                  {/* 注册路由 */}
                  <Route path="/about" component={About} />

                  <Route path="/home" element={<Home />} />
                </Routes>
              </div>
            </div>
          </div>
        </div>

v6版本：Route需要先被Routes组件包裹，再被路由器包裹，
其次把原来的component改为element，
最后千万不要忘了在element中写成组件形式</>，如：{}，
但是写成 component={Home}一样可用

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