react 路由配置

简介: react 路由配置

1. 安装react-router-dom

2. 在app.js中导入

mport { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

3. 使用懒加载

import React, {lazy,Suspense} from 'react';
const Test = lazy(()=>import('./modules/Test'))
const Home = lazy(()=>import('./modules/Home'))

4. 配置路由

<Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Test" element={<Test />} />
      </Routes>
    </Suspense>
  </Router>

总结:Suspense 是配合懒加载lazy使用的,fallback为模块未加载出来时的页面。


相关文章
|
9天前
|
移动开发 资源调度 前端开发
介绍React路由模式
【8月更文挑战第10天】介绍React路由模式
34 12
|
3月前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
60 2
|
3月前
create-react-app配置环境变量
create-react-app配置环境变量
117 0
|
8天前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
16 1
|
23小时前
|
前端开发 JavaScript 算法
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
|
23小时前
|
前端开发 JavaScript PHP
React Server Component 使用问题之路由的能力,如何实现
React Server Component 使用问题之路由的能力,如何实现
|
7天前
|
移动开发 前端开发 安全
React Native环境搭建及配置问题
React Native环境搭建及配置问题
20 2
|
8天前
|
移动开发 前端开发 JavaScript
react路由实现原理
【8月更文挑战第11天】react路由实现原理
16 1
|
2月前
|
前端开发 JavaScript API
React小记(四)_路由的基本使用
React小记(四)_路由的基本使用
19 1
|
1月前
|
网络架构
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
38 0

热门文章

最新文章