通了顺畅了

萌新提问关于 react 的路由问题?

项目是 Umi 创建的，用的路由插件是 "react-router-dom"。 有两个页面，第一个页面通过 "Link" 组件跳转到第二个页面，第二页页面是 "router" 文件夹里的 "router-page"，第一个页面的代码如下： import { Link } from 'umi'; export default function HomePage() { return ( 路由 ); } ".umirc" 里也的路由也添加好了： { path: '/router/router-page', component: 'router/router-page' }, 可以成功的从第一页跳转到第二页。 然后第二页 "router-page.tsx" 里的代码如下： import { Component } from 'react'; import { NavLink, Route, Routes } from 'react-router-dom'; export default class RouterPage extends Component { render() { return ( 首页 关于 ); } } function RouterView() { return ( }> }> ); } function Home() { return ( 首页内容 ); } function About() { return ( 关于页面内容 ); } 页面显示如下： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241229/b6e02ec4f7f59e8d667d225c72f89d7c.png) 现在的问题是，我点击“关于”按钮，页面直接变白板了，然后控制台提示： «You rendered descendant (or called "useRoutes()") at "/router/router-page" (under ) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.Please change the parent to .No routes matched location "/about"» 根据它的提示，我去把 "Link" 改了下： 路由 结果第二个页面全都变白板了。 我是 react 新手，想请教下大家这个问题应该如何解决？

看数据的中二丸子头

React 中如何正确的将多个路由打包给外部调用？

我在用 react 写一个网页项目，其结构大概如下 my-react-app/ |-- src/ | |-- components/ | |-- pages/ | | |-- MainPage.jsx | | |-- Auth/ | | | |-- Login.jsx | |-- routes/ | | |-- authRoutes.jsx | | |-- index.jsx | |-- App.jsx | |-- index.js |-- public/ | |-- index.html |-- package.json 路由用的是 "react-router-dom" v6.0+。在路由文件夹 "routes" 中，其中 authRoutes.jsx 这个文件是用来管理注册登录等路由的，代码如下 import React from 'react'; import { Route } from 'react-router-dom'; import Login from '../pages/Auth/Login'; const AuthRoutes = () => { return ( } /> ); } export default AuthRoutes; 而 routes/index.jsx 这个文件是用来把所有的路由都打包出去的，其代码如下 import React from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import MainPage from '../pages/MainPage'; import AuthRoutes from './authRoutes'; const AllRoutes = () => { return ( } /> ); } export default AllRoutes; 在 app.jsx 中引入如下 import React from 'react'; import AllRoutes from './routes'; import './App.scss' function App() { return ( ); } export default App; 我现在遇到的问题是总是提示错误，错误信息是 [AuthRoutes] is not a component. All component children of must be a or 我做了一些尝试 1. 将 authRoutes.jsx 文件中的 "" 和 "" 改成了 "" 和 ""，还是同样的错误。 2. 同样，将它们改成 ""，也是同样的错误。 3. 将 "} />" 改成了 ""，还是同样的错误。 4. 将 routes/index.jsx 中的 "" 改成 "} />"，错误没了，但访问 "/auth/login"，提示 "/auth/login" 路径并不存在。

我只爱钱

react-routerV6路由配置时loader函数耗时太长,导致白屏怎么解决?

最新的react-router V6版本中,可以在配置路由时编写loader函数,然后在组件中用useLoaderData接收 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/8a92fc49c646959525e0405735c8871a.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/7efe5274843bda0b3f3ec139eca76dad.png) 但实际使用发现一个问题:当loader函数耗时很长时,页面其实是处于白屏的,例如上图所示,就有3秒的白屏,就算使用如下Suspense,也无法显示fallback Loading...}> 所以大家是怎么解决白屏问题呢?