react搭建路由框架

在react中如何搭建一个路由

 首先先下载 npm create react-app (配置的文件名称)  

新建文件 命名为router中建立文件 （）.js

页面中快捷方式为rfce

配置

Suspense为内置优化 

• 在组件首次挂载前，如果组件被挂起，那么 React 将不会保留其任何状态。当组件完成加载后，React 将从头开始重新尝试渲染被挂起的组件树。
• 如果 Suspense 正在展示 React 组件树中的内容，那么当再次被挂起时，除非导致此处更新是由 startTransition 或 useDeferredValue 引起，否则 Suspense 将展示 fallback。
• 如果 React 需要隐藏被再次挂起的可见内容，它将清理内容树中的 layout Effect。当内容可以被再次展示时，React 将重新触发 layout Effect。这确保了测量 DOM 布局的 Effect 不会在内容不可见时运行。
• React 带有内置优化，例如 流式服务器渲染（Streaming Server Rendering） 和 Selective Hydration，它们已经与 Suspense 集成。

lazy为路由懒加载 

lazy 返回一个 React 组件，你可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时，尝试渲染它将会处于 暂停 状态。使用 <Suspense> 可以在其加载时显示一个正在加载的提示。

实例

import React, { Suspense, lazy } from 'react'

路由的两种模式 HashRouter ，BrowserRouter
import { Navigate, Route, Routes, HashRouter, BrowserRouter } from 'react-router-dom'
function Routerconfig() {
    let arr = [
        {
            path: "/",
            to: "/home"
        },
        {
            path: '/home',
            element: lazy(() => import('../views/Home'))
        },
        {
            path: '/eqwher',
            element: lazy(() => import('../views/eumpu'))
        }
    ]
    let Routers = () => {
        return arr && arr.map((item, index) => {
            return <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>

            </Route>
        })
    }
    return (
        <Suspense fallback={<div>页面加载中....</div>}>
            <HashRouter>
                <Routes>
                    {
                        Routers()
                    }
                </Routes>
            </HashRouter>
        </Suspense>
    )
}

export default Routerconfig