3.引入路由 react-router-dom V6

需要先下载路由

    npm install react-router-dom【版本：6.8.1】

 

安装 antd的icons：

    npm install --save @ant-design/icons 【版本：5.0.1】

 

前台路由的拆分如下pages下新建login/login.jsx和admin/admin.jsx：

    登陆：/login

                login.jsx

 

    主界面：/

                admin.jsx 

 

路由组件实现：App.js文件中代码如下：

import React from 'react'
import { BrowserRouter, Routes, Route} from 'react-router-dom'
import { ConfigProvider } from 'antd'
import 'antd/dist/reset.css'
import './App.css';
import Login from './pages/login/login'
import Admin from './pages/admin/admin'


function App() {
  return (
      <ConfigProvider
          theme={{
            token: {
              colorPrimary: '#00b96b',
            },
          }}
      >
        {/*<div className="App">*/}
        {/*  <Button type="primary">Button</Button>*/}
        {/*</div>*/}
          <BrowserRouter>
              <Routes>
                  <Route path="/login" element={<Login/>}>


                  </Route>
                  <Route path="/" element={<Admin/>}>


                  </Route>
              </Routes>
          </BrowserRouter>
      </ConfigProvider>
  );
}


export default App;