React/react-pc-project/src/App.js

import { unstable_HistoryRouter, BrowserRouter as HistoryRouter, Routes, Route} from 'react-router-dom'
import { history  } from './utils/history'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import Home from '@/pages/Home'
import Article from '@/pages/Article'
import Publish from '@/pages/Publish'
import { AuthComponent } from '@/components/AuthComponent'
import './App.css'

function App() {
  return (
    // 路由配置
    <HistoryRouter history={history}>
    <div className="App">
      <Routes>
        {/* 创建路由 path 和组件对应关系 */}
        {/* Layout 需要鉴权处理， 这里的 Layout 一定不能写死，要根据是否登录进行判断 */}
        <Route path='/' element={
          <AuthComponent><Layout/></AuthComponent>
        }>
          <Route index element={<Home/>}></Route>
          <Route path='article' element={<Article/>}></Route>
          <Route path='publish' element={<Publish/>}></Route>
        </Route>

        <Route path='/login' element={<Login/>}></Route>
      </Routes>
    </div>
    </HistoryRouter>
  );
}

export default App;