react-router 相关问题

React Router - 一个完整的React路由库，灵感来自Ember的路由系统

我正在使用React-Router-Dom库来创建不同页面的路由，它正在加载除产品页面之外的所有页面

我正在使用 React-Router-Dom 库来定义我的程序的路由，它适用于除产品页面之外的所有页面，并且在 Route.js 中我不明白为什么？索引.js 从 're... 导入 React

javascript reactjs react-router

回答 1 投票 0

如何使用React Router解决重路由的页面切换速度慢的问题？

我有一个 React 项目，并使用 React Router DOM v6 来管理我的所有路由。我有一条路线使用相当重的组件，当切换到该重组件时，有 1 秒以上的延迟...

reactjs performance react-router

回答 2 投票 0

react-router中的useloaderdata()是否解析promise？

} loader={blogPostLoader} /> 博客页面函数 BlogPostsPage() { const posts = useLoaderData() 返回（ <> 我们的博客 <Route index element={<BlogPostsPage />} loader={blogPostLoader} /> 博客页面 function BlogPostsPage() { const posts = useLoaderData() return ( <> <h1>Our Blog Posts</h1> <Posts blogPosts={posts} /> </> ); } export function loader () { return getPosts() } getPosts() export async function getPosts() { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); if (!response.ok) { throw { message: 'Failed to fetch posts.', status: 500 }; } return response.json(); } 我的主要疑问是，由于我们在加载器函数中返回一个承诺，因此useLoaderData()是否可以为我们解决它，因为我们不等待数据？这是我的疑问。 useLoaderData钩子不会解析从加载函数返回的任何Promise，它只是返回从加载函数返回的（已解决）值。每个路由可以定义一个“loader”函数，为路由提供数据元素在渲染之前。（强调我的） loader 在渲染路由（和 element 组件）之前调用，因此在渲染路由时，所有 Promise 都已解决。换句话说......所有“等待”都是在加载器函数和路由器中完成的，组件被安装/渲染，数据在组件中立即可用。 useLoaderData 不启动获取。它只是读取 React Router 内部管理的 fetch 结果，因此当它因路由之外的原因重新渲染时，您无需担心它会重新获取。您可以在以下位置找到更多详细信息：https://reactrouter.com/en/main/hooks/use-loader-data 如果您想返回Promise，可以使用defer：https://reactrouter.com/en/main/guides/deferred 基本上，一旦您使用 Promise 返回 defer，您就可以使用 React.Suspense 作为后备（加载指示器），并在 Await (by react-router-dom) 解析后使用 Promise 来渲染组件。这是指南的快照 import { Await, defer, useLoaderData, } from "react-router-dom"; import { getPackageLocation } from "./api/packages"; async function loader({ params }) { const packageLocationPromise = getPackageLocation( params.packageId ); return defer({ packageLocation: packageLocationPromise, }); } export default function PackageRoute() { const data = useLoaderData(); return ( <main> <h1>Let's locate your package</h1> <React.Suspense fallback={<p>Loading package location...</p>} > <Await resolve={data.packageLocation} errorElement={ <p>Error loading package location!</p> } > {(packageLocation) => ( <p> Your package is at {packageLocation.latitude}{" "} lat and {packageLocation.longitude} long. </p> )} </Await> </React.Suspense> </main> ); } 祝你好运！！！

javascript reactjs promise react-router

回答 3 投票 0

我正在使用react-router-dom来创建不同页面的路由，它正在加载除产品页面之外的所有页面

我是新来反应的。我正在使用react-router-dom库来定义我的程序的路由，它适用于除产品页面之外的所有页面，并且在Route.js中我不明白为什么？ //索引.js 我...

javascript reactjs react-router

回答 1 投票 0

错误：“A <Route> 只能用作 <Routes> 元素的子元素，从不直接渲染”

我正在尝试创建一个基本的私有路由，目前没有角色权限和限制，当我使用从react-router-dom文档中获得的语法时，它声明...

reactjs react-router

回答 1 投票 0

如何在react-router v5中监听查询参数更改事件

我希望能够监听查询参数更改事件，最好通过钩子，但任何事情都很好。我找不到任何表明它甚至可以使用react-router的东西，所以其他