安装路由插件—默认是6版本
npm i react-router-dom -s

这里查看

2. 组件介绍
   • 所有的需要使用路由组件都要包裹在BrowserRouter或者HashRouter标签里面

   Browser和HashRouter的主要区别:
   path表现形式不一样
   BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
   HashRouter的路径包含#,例如：localhost:3000/#/demo/test
   刷新后对路由state参数的影响
   BrowserRouter没有任何影响，因为state保存在history对象中。
   HashRouter刷新后会导致路由state参数的丢失！！！

   • Link跳转路由链接; NavLink跳转路由链接，会为选中路由添加一个active类名
   • 路由标签Route，写在Routes标签内部，用于显示路由链接对应的组件
   • 路由的重定向功能用Navigate实现
3. 主要代码

index.js

用Router(BrowserRouter)标签包裹整个App组件

import React from "react";
import ReactDOM from 'react-dom/client'
import {
    BrowserRouter as Router} from 'react-router-dom'
import App from "./App";

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(
  <Router>
    <App></App>
  </Router>
)

App.js

import React from 'react'
import {
    Routes, NavLink, Route, Navigate } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

export default function App() {
   
  return (
    <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"