不使?p>

寐酚杀碜⒉崧酚桑?/h3>

<div className="panel-body">
 <Routes>
   <Route path="/about" element={<About />}></Route>
   <Route path="/home" element={<Home />}></Route>
   <Route path="/" element={<Navigate to="/home" />}></Route>
 </Routes>
</div>

使用useRoutes注册路由：

1、引入useRoutes

import { NavLink, Routes, Route, Navigate, useRoutes } from 'react-router-dom';

2、编写路由表并使用

import { NavLink, Routes, Route, Navigate, useRoutes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
function App() {
  // 路由表
  const elements = useRoutes([
    {
      path: '/about',
      element: <About></About>
    },
    {
      path: '/home',
      element: <Home></Home>
    },
    {
      path: '/',
      element: <Navigate to="/home" />
    }
  ])
  return (
    <div className="App">
      <div>
       ......
        <div className="row">
          ......
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
              
                {
                  elements
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

             <div className="panel-body">
                {/* 注册路由 */}
                {
                  elements
                }
              </div>