React页面加载后如何通过API返回数据动态添加Route路由并正常访问

• 异步数据未存入响应式状态：你当前用普通变量json存储接口返回值，React不会监听普通变量的变化，接口请求完成后组件不会触发重渲染，初始渲染时json是空数组，所以动态路由根本没有被渲染出来。
• 错误使用ReactDOM.render渲染路由：Routes组件下直接放Route组件即可，不需要调用ReactDOM.render，这个API是用来把React组件挂载到真实DOM节点上的，用在这里完全不符合使用场景。
• 缺少加载状态兜底：接口请求完成前如果用户直接访问动态路由，会因为路由还没生成触发404。
• React Router v6已经废弃exact属性，默认就是精确匹配，不需要额外添加。

import { useState, useEffect } from 'react'
import { Router, Routes, Route } from 'react-router-dom'

function App() {
    // 用响应式state存储接口返回的应用列表
    const [appList, setAppList] = useState([])
    const [loading, setLoading] = useState(true)

    // 组件挂载后发起接口请求
    useEffect(() => {
        fetch(`${baseURL}/applications/`)
            .then(response => response.json())
            .then(data => {
                setAppList(data)
                setLoading(false)
            })
    }, [])

    // 接口请求中显示加载状态，避免路由未渲染导致的404
    if (loading) return <div>加载中...</div>

    return (
      <Router>
        <div className="App">
          <header className="App-header">
              <Routes>
                  <Route path="/" element={<ApplicationsList/>}/>
                  <Route path="/1080p-Lock" element={<ApplicationPage name={"1080p-Lock"}/>}/>
                  {/* 直接遍历生成Route组件即可，不需要调用ReactDOM.render */}
                  {appList.map(item => (
                      <Route 
                          key={item} 
                          path={`/${item}`} 
                          element={<ApplicationPage name={item}/>}
                      />
                  ))}
                  {/* 可选：添加404兜底路由，处理未匹配的路径 */}
                  <Route path="*" element={<div>页面不存在</div>} />
              </Routes>
          </header>
        </div>
      </Router>
    );
}

内容的提问来源于stack exchange，提问作者Issac Abraham