将Suspense与React Router一起使用时，Typescript引发显式函数返回类型错误
当将Suspense与React Router一起使用时，Typescript可能会引发显式函数返回类型错误。这是因为Suspense组件在React Router中的使用方式可能会导致类型推断错误。
React Router是一个用于构建单页面应用程序的库，它提供了路由功能，使得在不同的URL路径下渲染不同的组件成为可能。而Suspense组件是React的一个特性，用于在组件树中等待异步加载的内容，并在加载完成之前显示一个fallback组件。
当我们将Suspense与React Router一起使用时，通常会在路由组件中使用Suspense组件来等待异步加载的组件。然而，由于React Router的类型定义可能无法正确推断Suspense组件的返回类型，Typescript会发出显式函数返回类型错误。
为了解决这个问题，我们可以使用类型断言来告诉Typescript正确的返回类型。具体做法是在Suspense组件的fallback属性中使用as关键字来指定正确的类型。例如：
<Suspense fallback={<LoadingComponent /> as React.ReactElement}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>在上面的例子中，我们使用as关键字将<LoadingComponent />断言为React.ReactElement类型，告诉Typescript正确的返回类型。
需要注意的是，这种解决方法只是一种权宜之计，它并不能完全解决类型推断错误的问题。在使用Suspense与React Router时，我们仍然需要仔细检查代码，确保类型推断的正确性。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云容器服务（TKE）、腾讯云函数计算（SCF）。
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。
- 腾讯云容器服务（TKE）：基于Kubernetes的容器管理服务，提供高度可扩展的容器化应用程序部署和管理解决方案。
- 腾讯云函数计算（SCF）：无服务器计算服务，让您无需关心服务器管理，只需编写和部署代码即可运行和扩展应用程序。
以上是对将Suspense与React Router一起使用时Typescript引发显式函数返回类型错误的解释和解决方法，希望能对您有所帮助。
相关·内容
如何使用React-Router在React中添加404 - Not Found页面？ 这是我的尝试： // routes.tsx
export const routes = [
{
path: '/students',
render: (props: any) => <List {...props} title={`Students`} />,
},
{
path: '/teachers',
render: (props: any) => <List {...props} title
浏览 95提问于2020-04-11得票数 1
1回答
我正在使用"@reach/router": "^1.2.1"，并且在我的App.js文件中，我有一个后备组件可以在我的路由加载时显示出来： <React.Suspense fallback={<MainLandingPageLoadingScreen />}>
<Router>
<MainLandingPage path="/" />
<AnotherLandingPage path="/coolbeans" />
<NotFound
浏览 14提问于2019-05-29得票数 3
1回答
我对Typescript和以下消息有问题：
{ pictureUrl: Element[]；pictureUrl: string；}‘不能赋值给类型'IntrinsicAttributes &{ children?：ReactNode；}’
“IntrinsicAttributes&{IntrinsicAttributes？：ReactNode；}”类型上不存在属性“”pictureUrl“”
我真的不知道我做错了什么，有人看到问题了吗？
这是我的App组件：
import React from 'react';
import { Root, Rou
浏览 42提问于2020-05-10得票数 1
回答已采纳
我有一个使用MUI的react应用程序，现在我已经用一个微调器实现了suspense，它在内容加载时作为回退组件发挥作用。我很乐意在回退组件中添加一个淡入/淡出转换，因为目前的更改太突然了。 我的设置(对于这个特定问题的相关部分)如下： 依赖关系 "@glidejs/glide": "^3.4.1",
"@material-ui/core": "4.8.3",
"@material-ui/icons": "4.5.1",
"@material-ui/lab&
浏览 45提问于2020-05-02得票数 13
2回答
我有几个部件。当param处于路径时，将处于活动模式，rest将处于非活动模式并显示消息。
所有组件都出现在页面上。一个是活跃的，其余的是不活跃但可见的。
组件需要读取url参数。
如果我使用路径，那么在每个时刻，我只能显示一个组件。想到的第一个解决方案是没有路径，只有路径旁。我需要读取app.js上的路由参数以显示active/deactive，也可以在app.js内部的子组件中读取相同的params。
当我们没有可匹配的路径时:如何在app.js中读取路由参数？如何将路由参数传递给子组件？
import React, { Suspense } from 'react
浏览 0提问于2019-03-16得票数 0
2回答
我正在使用Parcel为我的应用程序和Shadow创建包。以下是我的配置，
///index.tsx file
import customCSS from "bundle-text:./assets/antd.scss"
const appContainer = document
.getElementById(config.containerId)
?.attachShadow({ mode: "open" }) as ShadowRoot
ReactDOM.render(
<React.StrictMode
浏览 15提问于2022-02-25得票数 1
我使用的是React代码，像这样拆分
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/
浏览 6提问于2022-02-21得票数 0
回答已采纳
1回答
我正在尝试将这段react js代码转换为typescript，但我不确定如何将此代码转换为typescript。 我对这两条线路有问题 const Shop = lazy(pageLoader(() => import("pages/report/shop")));
const Item = lazy(pageLoader(() => import("pages/report/item"))); 我得到以下错误，并且我不确定该怎么做 Argument of type '() => Promise<unknown>'
浏览 5提问于2021-08-23得票数 0
import React, {Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const HomePage = lazy(() => import('../../layouts/Home/Home'));
const Routes = () => (
<Router>
<Suspense fallback
浏览 11提问于2019-10-24得票数 0
有什么方法可以在旧的react-router (3)中使用React.lazy和React.Suspense吗？如果是，如何在react-router 3上实现React.lazy和React.Suspense？
浏览 1提问于2019-10-18得票数 1
3回答
正如React文档中提到的那样，我正在尝试实现。
在添加延迟实现之前，这里是我的应用程序。这样做很好：
import Counter from "./Counter";
import Home from "./Home";
import Login from "./Login";
export function App() {
return (
<Router>
<Suspense fallback={<div>"Loading.."</div>}>
浏览 7提问于2020-12-07得票数 13
回答已采纳
1回答
如何正确设置ModuleFederation和react-router-dom，以便
Router和在Host应用程序和远程Header应用中定义的路由都有指向主机？中定义的路由的<Link>组件。
但是，下面的设置失败了以下错误：
index.js:15 Uncaught Error: useHref() may be used only in the context of a <Router> component.
设置：
主机mfe应用程序，本地主机:3001
...
import { BrowserRouter } from 'react-router-
浏览 10提问于2022-01-09得票数 5
回答已采纳
我尝试使用suspense和react路由器，但我不知道它应该返回什么，并且我不想禁用此规则。完整错误消息： Type '{ history: History<any>; location: Location<any>; match:
match<any>; staticContext?: StaticContext | undefined; }' has no
properties in common with type 'IntrinsicAttributes & { children?:
ReactNode; }
浏览 10提问于2019-04-24得票数 1
我使用react-router-dom在我的React应用程序中路由。我的应用程序的一部分是在另一个包中提取的。依赖项列表如下所示：
./app/dashboard/package.json
{
"dependencies": {
"@app/components": "^1.0.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router-dom": "^5.0
浏览 1提问于2019-04-06得票数 84
回答已采纳
延迟加载路由是有意义的，因为它们通常是许多组件树的根。我希望能够在加载下一个路由时显示当前路由。用户期望在页面加载时等待一些时间。
我得到的错误是Error: A React component suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.。
我使用的代码是...
import
浏览 17提问于2019-07-22得票数 1
回答已采纳
未明错误:对象作为React子对象无效(找到:键为{$$typeof、_payload、_init}的对象)。如果您打算呈现一个子集合，请使用数组代替。
index.tsx：
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import 'assets/styles/base.css'
ReactDOM.render(<App />, document.getElementById('roo
浏览 6提问于2022-02-11得票数 0
1回答
与RCA和TS反应
当我试图运行npm run build时，我会得到这个错误
Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha
几乎所有与测试相关的东西在构建上都有错误。我已经签了node_modules，而且确实没有这些类型。
这个问题不会发生在开发模式下，一切正常，所有的测试都通过了。它在运行构建时的部署问题。
浏览 7提问于2022-10-27得票数 2
我想写一个通过在TypeScript中使用React.lazy和React.Suspense来包装组件的HOC，但是我不知道如何修复类型错误。 type AsyncComponentFactory<P> = () => Promise<{ default: ComponentType<P> }>;
export function loadable<P>(factory: AsyncComponentFactory<P>): ComponentType<P> {
const LazyComponent = Re
浏览 35提问于2020-12-25得票数 3
我正在尝试设置一个非常基本的示例，类似于：https://reactjs.org/docs/code-splitting.html#route-based-code-splitting 它应该根据当前路由动态延迟加载具有依赖关系的路由组件(ModuleOne或ModuleTwo)。 然而，看起来代码拆分并不起作用，所有的东西都包含在一个包中。 webpack.config.js const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
mod
浏览 54提问于2019-09-11得票数 1
回答已采纳
我有两个延迟加载的路由。当前当我通过f.e.更改路线时。使用history.push('/')时，以前的路由消失了，但新的路由不会显示(重新加载后会显示)。怎么会这样呢？ import React, {Suspense, lazy} from 'react';
import './App.scss';
import './modules/Header/Header.scss';
import {Route, Switch} from "react-router-dom";
import Footer from &
浏览 11提问于2020-08-11得票数 0
2回答
// project/src/App.js
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {NavBar, Loading} from "./components";
import './index.css';
const Home = lazy(() => import('./components/hom
浏览 5提问于2021-09-23得票数 2
回答已采纳
我想执行React Codesplit。我已经按照React提供的文档进行了操作，但似乎显示了一个'init is not a function‘错误： ? 下面是我的代码： import React, {lazy, Suspense} from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
const Privacy = lazy(() => import('./pages/PrivacyPolicies
浏览 38提问于2021-06-19得票数 1
回答已采纳
我是新的反应，正在尝试React.lazy和悬念进口，我只想说，我爱他们！我的网站从45%的性能提高到50-60%，这是没有优化图像！谷歌搜索结果，我来了！
但是，我有一个问题，我不知道如何延迟加载一个组件，这个组件是在我的自定义ProtectedRoute中呈现的，并且响应路由器-dom v5。
延迟加载工作，并生效时，我使用的反应-路由器-多国本机路由，但当我想通过一个通过我的自定义保护路由一个受保护的组件，什么都不会发生，没有错误信息在控制台或网站上，只有一个白屏幕。我怀疑导入和代码放在错误的位置有问题。
应用程序
import React, { Suspense } from "
浏览 12提问于2022-03-24得票数 0
我使用React路由器根据特定的url呈现不同的页面。现在，我想使用来延迟加载所有页面组件：
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
const Page = React.lazy(() => {
return import("./Page");
});
const App = () => {
return (
<Router>
浏览 0提问于2020-10-15得票数 16
我想在我的应用程序中使用react- router -dom中的3个东西来实现路由器，即路由、useNavigate和Redirect。但问题是路由和useNavigate在react-router-dom 5.2.0中不可用。因此，为了使用路由和useNavigate，我安装了react-router-dom v6.0.0-alpha.1。但问题是Redirect从react-router-dom v6.0.0-alpha.1中删除了。现在我不明白如何在特定的react-router-dom下使用路由、useNavigate和Redirect
import React, { lazy, Su
浏览 0提问于2021-01-26得票数 1
3回答
我正在使用React的最新版本(16.6)和react-router (4.3.1)，并尝试使用React.Suspense进行代码拆分。
尽管我的路由工作正常，代码确实拆分成了几个动态加载的包，但我收到了一个警告，告诉我不是返回函数，而是将对象返回给Route。我的代码：
import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import Loading from 'common/Load
浏览 9提问于2018-10-26得票数 20
回答已采纳
我遵循来为现有的React启用TypeScript。启动应用程序时，会出现以下错误：TypeError: Cannot read property 'lazy' of undefined
test版本为16.8.0 ( React，react dom，@type/react，react test-renderer)。
index.js (由于对代码和文本大小的堆栈溢出限制，并没有显示所有导入)
import React, { Suspense } from 'react';
const AsyncApp = React.lazy(() => i
浏览 5提问于2020-04-01得票数 0
我正在尝试第一次使用useRoutes和延迟加载来设置我的项目。但我有一个问题，它不会加载孩子当重定向到那个网站？主页运行得非常好。
Home path="/“
import React from "react";
import { Link } from "react-router-dom";
const Home = () => {
return (
<>
<h1>Hello Welcome to my beauty page</h1>
<Link to="
浏览 5提问于2022-05-10得票数 0
App.tsx -
import React from 'react'; import { useNavigate } from 'react-router';
import AppView from './App.view';
interface Props { }
const App: React.FC<Props> = (props: React.PropsWithChildren<Props>)
=> { const navigate = useNavigate(); const isLogge
浏览 3提问于2021-11-24得票数 0
1回答
我在我的项目中使用了反应性路由器，因为在每个路由器路径的开头都添加了"#“标志。ex"：
我想去掉那个#标志，但我自己解决不了。
我的路由过程是在app.js中进行的，检查用户是否已登录，如果没有登录，他将重定向到/login页面。(为此，它也显示路径为)。
下面是app.js
import React, { Component, Fragment } from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
// import {
浏览 2提问于2019-11-18得票数 0
回答已采纳
我正在使用React，并以一种先有布局组件然后是主页面组件的方式组织我的项目。我希望根据用户到达的路线更改header组件中页面的标题。
这是我的App.jsx：
import React, { Suspense, lazy, Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './layout/Header.jsx';
import Footer from
浏览 16提问于2018-12-14得票数 4
回答已采纳
我需要你的帮助。最近开始学习打字稿，在反应方面有一个问题。我尝试用React.memo()包装路由器。像这样：
export const Router = React.memo<RouterPropsInterface>(({ isAuth }) => {
if (!isAuth) {
return (
<Suspense fallback={<Loader text={""}/>}>
<Routes>
<Route
浏览 8提问于2022-04-06得票数 0
我有一个从登录页面开始的React应用程序。当在登录页面上单击登录按钮时，我希望它重定向到主页。当我回到主页时，我想被重定向到通知页面。因此，路由操作如下：
/notifications / -> /login/login -> /home /home ->
但是，当我单击“登录”按钮时，它会转到主页，然后是“通知”页，但是尽管我将路径视为，但页面并没有加载。页面控制台上什么也没有。
我的密码是：
App.js
import React, { Component } from 'react';
import {HashRouter, Redirect, Rou
浏览 5提问于2019-12-15得票数 0
我想重定向一个用户，如果他试图访问我的网站，如果他的推荐人不是一个接受的价值。
我知道我可以这样做：
if(url.referrer === 'www.example.com')
REDIRECT
但它显然不是最安全的方法，所以我想知道react是否提供了一种类似这样的方法：
<Router>
<Suspense fallback={<div/>}>
<Switch>
<Route exact path="/" referrer="www.example.com"
浏览 0提问于2019-08-17得票数 0
我正在为我的项目使用coreui。因为我想传递每个组件的道具，当需要时在map方法中渲染。 下面是用于将每个组件映射到路由的代码 render() {
return (
<div className="app">
<AppHeader fixed>
<Suspense fallback={this.loading()}>
<DefaultHeader onLogout={(e) => this.signOut(e)} />
浏览 14提问于2019-09-20得票数 0
回答已采纳
1回答
呈现Box会产生以下错误：
表达式产生的联合类型对represent.ts(2590)来说太复杂了。
正如我所看到的，这是由于同时安装了@mui/material和@react-three/drei & @react-three/fiber。
这个错误背后的原因是什么？我只从Box导入mui组件。有类型混淆什么的吗？解决方案/解决办法是什么？
复制步骤：
设置一个cra应用程序：npx create-react-app my-app --template typescript
将下列软件包添加到package.json中
"dependencies&
浏览 20提问于2021-10-19得票数 3
1回答
我使用的是React路由器-dom v6，这里有一个问题.该网站运行良好，但在控制台，它给了我这个错误。“没有路线匹配的位置"/”有人能告诉我有什么问题吗？“我刚从反应性路由器-dom v5转到v6，这是我APP.jsx的代码。
import React, { lazy, Suspense, useEffect } from "react";
import "./App.css";
import Header from "./Screens/Header/Header";
import { BrowserRouter as Route
浏览 5提问于2021-12-09得票数 1
回答已采纳
学习typescript并尝试将我的另一个react项目转换为typescript来学习它。 我在我的App.tsx文件- Type '{ history: History<unknown>; location: Location<unknown>; match: match<any>; staticContext?: StaticContext | undefined; }' has no properties in common with type 'IntrinsicAttributes'.中收到有关路由的错误 nam
浏览 211提问于2021-04-03得票数 1
回答已采纳
如何使用react-router-dom v6管理react项目中的历史记录？目前发生的情况是，当用户单击浏览器的后退按钮时，它会将他带到默认的浏览器页面，而不是他在网站上访问的前一页。
这是密码
index.tsx
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
浏览 6提问于2022-08-10得票数 -1
回答已采纳
我使用react和悬念来加载组件，但是如果我尝试使用npm 构建应用程序，我会发现一个错误：错误: Uncaught : Minified #294;，而且如果我评论延迟加载，构建就会成功。代码：
import { Suspense, lazy } from 'react';
const Component= lazy(() => import('./../location'));
const Homepage=()=>{
return (
<>
<Suspense fallback={<div>
浏览 5提问于2019-09-19得票数 4
回答已采纳
1回答
我对反应路由器相当陌生..。我使用的是React路由器-dom 5.0.0
由于某些原因，我的仪表板路径不匹配，当我导航到/dashboard时没有呈现任何内容
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from './theme';
import { BrowserRout
浏览 0提问于2019-06-01得票数 0
回答已采纳
错误是：“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到的是:object。”
我没有看到任何错误，感谢你的帮助！
import React, { lazy, Suspense } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import NavWrapper from "./NavWrapper";
const Home = lazy(() => import("./Home
浏览 9提问于2019-08-02得票数 0
我想转到带有链接的页面，检查terms.But后什么也不会发生。 App.tsx import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./Components/Login";
import "./styles/index.scss";
import { Suspense } from "react";
import ToDoScreen from "./Pages/ToDoScr
浏览 14提问于2021-04-04得票数 0
回答已采纳
1回答
在酶中测试延迟加载的组件
、、、
给定包含多个延迟加载的路由的简单应用程序， import React, { lazy, Suspense } from "react";
import { Route } from "react-router-dom";
import "./styles.css";
const Component = lazy(() => import("./Component"));
const PageNotFound = lazy(() => import("./PageNotFound"));
expor
浏览 11提问于2021-01-16得票数 0
回答已采纳
试图创建一个具有新依赖项的项目，但我仍然遇到了构建问题。
package.json：
{
"name": "my-files",
"version": "1.0.0",
"description": "App",
"main": "main.js",
"scripts": {
"format": "prettier --write ./src/**/*",
"serve"
浏览 0提问于2021-08-04得票数 0
1回答
反应懒散使开关不使用？
、、、
当我使用React时，我有一个bug。懒惰，然后404显示在另一个路由。
import React, { lazy, Suspense } from "react";
import { Route, Switch } from "react-router-dom";
import "./styles.css";
const HomePage = lazy(() => import("./homepage"));
const ContactPage = lazy(() => import("./contact
浏览 4提问于2020-09-04得票数 0
这是我的域，在刷新时它可以在本地找到。上传网站后，当我刷新时，它不会加载当前页面。相反，得到一个错误，如"404页找不到“，如何解决这个问题？
以下是我的路由器详细信息：
import React, { Suspense, FC} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import "./styles/l
浏览 4提问于2021-01-01得票数 0
回答已采纳
1回答
我正在将我的根还原器从javascript转换为类型记录，但是，我收到一个衬里错误，上面写着：
函数缺少返回类型。(@typescript-eslint/explicit-function-return-type)
我的根还原器函数的正确返回类型应该是什么？谢谢。
import { History } from 'history';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import
浏览 0提问于2019-07-18得票数 3
回答已采纳
1回答
响应cdn的延迟导入
、、、
我遵循这个指南，使用React路由器和悬念来进行延迟加载：
这是我到目前为止的代码：
import React, { lazy, Suspense } from 'react';
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
const HomePage = (
lazy(() => (
import('./pages/HomePage')
))
);
const BookingsPage = (
l
浏览 0提问于2019-02-05得票数 3
回答已采纳
我必须使用新的React lazy API (16.6)导入组件。
import React, {PureComponent, lazy} from 'react';
const Component1 = lazy(() => import('./Component1'));
const Component2 = lazy(() => import('./Component2'));
class CustomComponent extends PureComponent {
...
render() {
return
浏览 1提问于2018-11-07得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
