React项目配置router

#自学笔记

第一步：安装router

npm i react-router-dom

 第二步：在src目录下的index.js里引入HashRouter或HistoryRouter，并应用于App组件

import { HashRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <HashRouter>
     <App />
   </HashRouter>
);

第三步：在router文件夹内创建index.js，配置router文件并导出routes

import React from 'react'
import { Navigate } from 'react-router-dom'

//懒加载
const Home = React.lazy(() => import('@/views/home'))
const Entire = React.lazy(() => import('@/views/entire'))
const Detail = React.lazy(() => import('@/views/detail'))

const routes = [
  {
   path:'/',
   element:<Navigate to='/home'/>
  },
  {
   path:'/home',
   element:<Home/>
  },
  {
   path:'/detail',
   element:<Detail/>
  },
  {
   path:'/entire',
   element:<Entire/>
  },
]

export default routes

第四步：在App组件内引入useRoutes和routes文件，并应用

import React, { memo } from 'react'
import { useRoutes } from 'react-router-dom';
import routes from './router';

const App = memo(() => {
  return (
    <div className="app">
      <div className="header">header</div>
      <div className="content">
        {useRoutes(routes)}
      </div>
      <div className="footer">footer</div>
    </div>
  )
})

export default App

第五步：在src目录下的index.js文件中引入Suspense，展示loading界面

import React, { Suspense } from 'react';

root.render(
    <Suspense fallback='loading'>
     //fallback可以为组件/图片等等
       <HashRouter>
         <App />
       </HashRouter>
    </Suspense>
)