#自学笔记
第一步:安装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>
)