app-router 相关问题


错误:链接需要在项目的 Expo 配置(app.config.js 或 app.json)中进行构建时设置 `scheme`

我使用react-native expo bare-workflow创建了该项目 npx create-expo-app --template bare-minimum 创建项目后,我尝试将expo-router安装到项目中,一切都完成了


React中react-router-dom最新版本如何实现延迟加载

我想使用Typescript在React中实现延迟加载。我收到打字稿错误。 常量应用程序 = () => { 返回 ( 我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>


NG8001:“app-welcome”不是已知元素:

我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢你! 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢! app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置,但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗? app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。


Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...


React Router v6.4+ 数据 API:重试加载程序而不显示错误

使用react-router 6.21.1和新的数据api,我的路由设置如下: 常量路由 = [ { 元素: , 错误元素:, 孩子们...


使用react-router-v6和zustand进行身份验证

应用程序路线: 函数 AppRoutes(): JSX.Element { 返回 ( } /> }> ...


React 组件的样式与其他组件的样式冲突

我有一个像这样的应用程序组件: 常量应用程序 = () => { 返回 ( 我有一个像这样的应用程序组件: const App = () => { return ( <Router> <Route exact path='/' component={Landing} /> <Route path='/login' component={Login} /> </Router> ) } 每个组件都有自己的目录和样式表。我的文件夹结构是这样的: src | | Landing| | | | Landing.js | Landing.module.css | | Login| | | | Login.js | Login.module.css | app.js index.js 我的问题是Login和Landing组件的样式表相互冲突,并且Landing页面看起来不太好。例如,登录的背景颜色适用于登陆页面,但我不希望这样。 我只在每个组件中导入 CSS 文件,如下所示: import styles from './Landing.module.css' 这是我如何使用样式变量的示例: return ( <div className={styles.navBar}> <Link to="/"> <img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" /> </Link> {loggedIn && <div> <button onClick={logout}>log out</button> <Link className={styles.navItem} to="/users">get users</Link> </div> } {!loggedIn && <div> <Link className={styles.navItem} to="/login">log in</Link> <Link className={styles.navItem, styles.btn} to="/signup">signup</Link> </div> } </div> ) 即使它很旧,我也会回答谁在后面:发生这种情况的原因是你的CSS选择器很可能具有相同的特异性,因此是外观的顺序决定了应用哪种样式。 文件夹结构中的 Login 位于 Landing 之后,因此您的捆绑程序将使 Login 的样式出现在捆绑的 CSS 中的最后,然后它将覆盖 Landing 的样式。 这个问题有很多解决方案: 您可以增加您想要赢得的选择器的特异性(例如,通过在 CSS 文件中重复两次该类) 您可以降低想要丢失的选择器的特异性(例如使用 :where()) 如果您同意支持哪些浏览器(例如@layer),现在您可以使用级联层 等等...


React Router 为动态路由渲染错误组件的问题

我遇到了 React Router 的问题,使用动态参数导航到特定 URL 会渲染错误的组件。具体来说,当导航到 http://localhost:3001/Create/4 时,...


有没有一种方法可以在React中单击时嵌入链接来重定向组件?

我有一个导航栏,其路线设置如下: 导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }


如何使用Vue Router的相对重定向(不起作用)?

我正在从 Vue router Doc 学习相对重定向。 我正在尝试实现代码的文档示例。 常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...


反应问题,当我将标头组件添加到我的主页组件时,没有任何内容加载

从“react”导入React; 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航; 导入首页


React Router:第一次访问 ParentNotificationsPage 组件时不显示数据,仅在返回后才显示

我在 React 应用程序中遇到了 React Router 的问题,其中 ParentNotificationsPage 组件在第一次访问时不显示数据。仅当我导航回


vue-router useRouter 在构建库组件时不起作用

我正在构建一个 Vue3 npm 组件库,希望我可以使用 vue-router 的 useRouter 访问当前路由器,并且它将由导入我的任何 vue 应用程序自动提供


this.props.history.push() 似乎不再在 React Router v4 中工作,有什么替代方案吗?

我是 React 新手,我看到的大多数有关使用 React Router 进行重定向的教程似乎都在使用上述代码片段。我想要实现的是将用户重定向到主页...


ng-bootstrap 滚动间谍在没有高度的情况下无法工作?

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令,如文档中所述,但它不起作用 - 滚动时活动项目不会改变。 我的代码如下: 我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令,如文档中所述,但它不起作用 - 滚动时活动项目不会改变。 我的代码如下: <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到,我的问题是我没有向我的 div 提供 height,这是事实。 但我的滚动间谍部分遍布整个页面,而不是一个小 div,(导航本身是 sticky-top)。所以我不能给它高度。 我知道有替代方法 - 刷新窗口滚动上的滚动间谍,但我没有找到可以帮助我的正确代码。 你能解决我的问题吗? 为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。 非常感谢! 附上 stackblitz 演示的链接 注意:我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy (我想它是非常相似的库) 我做什么: 我将所有内容(包括导航)包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比(1 是 100%) 包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯,问题是如何“滚动到”。 “链接”应该作为链接使用。 第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件,我们需要使用提供者,provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后,我们需要考虑到我们的页面确实没有滚动,div“包装器”是谁拥有滚动。因此,我们订阅 router.events,当事件有“锚点”时,我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子


当React Router中的路由命中时,如何有条件地渲染两个组件或更改两个出口?

我有一个 React 应用程序,我在其中使用 React Router。在我的布局组件中,我有这样的结构: 从“反应”导入反应; 从 './components/Header/Header' 导入标头; 导入 Foo...


React store.getState 不是一个函数

这是我的代码: 商店.js 从 'redux' 导入 {createStore, applyMiddleware, compose}; 从“不可变”导入{fromJS}; 从“react-router-redux”导入{routerMiddleware}; 导入createSagaMidd...


Angular16 中的 Router parseUrl() 与 navigate()

我正在使用 authGuard 进行身份验证。我想知道这两个之间的区别 // 重定向到登录页面 return router.navigate(['/login']); return router.parseUrl('/login'); 在...


Typescript、React、强类型 useHistory

我将 useHistory (react-router-dom) 变量作为参数发送到employee.service,其中我使用带有状态和路径名的“history.push”方法。不幸的是我不能...


如何处理默认路径

我在我的网站上使用 React Router,遇到了以下问题。我的主要应用程序组件定义如下: 导入'./App.css' 从 './Navbar' 导入 { Navbar } 进口 { 出口 } f...


onMounted 当没有要关联的活动组件实例时调用

Symfony/VueJS 组件 // 导入 从“../hooks/getUser”导入 getUser; 从 'vue-router' 导入 { useRoute } // 增值服务 常量路由 = useRoute() 常量 { 用户 } = getUser(1) const 路线我...


需要帮助设置 Google App 脚本的 CI/CD?

我们正在使用 Google App Script 构建一个插件,并希望将其发布到 Google Workspace MarketPlace。我们设法使用 App Sc 的管理部署功能发布版本化部署...


Nuxt 3 项目无法找到 PWA 图标

开发工具错误 我目前正在尝试在我的 nuxt 3 项目中实现 PWA 功能,但我不断遇到这个问题:[Vue Router warn]: No match found for location with path "/icon_512x512...


在普通的 create-react-app --template typescript 文件夹中安装 eslint 失败

我正在尝试将 eslint 安装到从 TypeScript 模板创建的普通 create-react-app 文件夹中。 我运行了以下命令: % npx create-react-app REDACTED --模板打字稿


如何使用 2 个条件角度选择器

我有一个带有选择器的多输入组件,如下所示: 我有一个带有选择器的多输入组件,如下所示: <app-input type="currency" formControlName="currency"></app-input> <app-input type="date" formControlName="dateOfBirth"></app-input> 因此,从该组件中,我有一个像这样的选择器: @Component({ selector: 'app-input[type=currency]', }) @Component({ selector: 'app-input[type=date]', }) 现在,我想添加多个 currency 组件。一种用于默认货币成分,第二种用于具有动态货币符号的货币。 所以,我想通过选项让它变得不同。当选择器有选项时,显示带动态符号的货币,否则或默认,显示不带符号的默认货币。 我一直在尝试使用下面的这个选择器,但它不起作用。 对于默认货币: @Component({ selector: 'app-input:not([options])[type=currency]', }) 对于动态符号货币: @Component({ selector: 'app-input[options][type=currency]', }) 提前谢谢您 您可以像这样添加数据属性来区分选择器 无符号: @Component({ selector: 'app-input[type=currency]', }) 带有符号: @Component({ selector: 'app-input[type=currency][data-symbols]', }) html with symbols: <app-input type="currency" formControlName="currency" data-symbols></app-input> without symbols: <app-input type="currency" formControlName="currency"></app-input>


React-router:更改 URL 并清除历史记录

我有以下场景: 用户打开激活链接;用户完成激活过程后,系统会将其移动到另一个页面。 我不想保留激活状态...


链接点击时的反应模式调用

使用react-modal,我需要通过锚标记或react-router-dom链接单击超链接时显示模式。 示例:单击注册超链接,注册表模式应打开。


如何更改Git远程仓库?

考虑: PS C:\.dev\despesas-python> heroku 创建 app-despesas-pessoais-python » 警告:heroku 更新从 7.53.0 到 8.0.5 可用。 创建 ⬢ app-despesas-pessoais-python...完成 https...


在loader中使用URL参数时出现错误

我在我的 React 项目中使用 React-Router。我有一个如下所示的移动页面: 从“反应”导入反应; 从 'axios' 导入 axios 导出异步函数加载器({ params }) { ...


功能测试对所有守卫都有作用吗?

我的应用程序中有两个不同的用户对象,一个App\User 和一个App\Admin。对于两者,我有不同的警卫进行身份验证。 我的默认防护是模型 App\User 的网络防护并且...


什么在 Next.js next/navigation 中的react-router-dom 中替换 useLocation() ?

最近,我从 React 迁移到 Next.js [email protected]。在我的网站中,我在使用 useNavigate() 推送时使用了状态,并使用 useLocation() 从另一个页面获取值。我怎样才能做同样的事...


Terraform 包含的功能未按预期工作

我想根据“app”和“db”层过滤 Terraform 中的字符串列表。但是, contains 函数返回带有字符串“app”的空结果 变量“层”{ 类型...


React Router - 如何确定是否按下了后退按钮?

我有这些场景 设置页面 -> 结果页面 -> 详细信息页面 用户选择设置,单击下一步,获取结果,然后单击查看更多详细信息。 详情页 -> 结果页 用户去...


azure function 应用程序环境的配置值

您正在开发一个Azure Function App。您使用 Azure Function App 主机不支持的语言开发代码。代码语言支持 HTTP 原语。 您必须部署...


有没有办法清除react中的react历史记录?

我有一个针对移动用户的 Web 应用程序,但由于我们的客户不需要移动应用程序,因此它是使用 React 开发的。我已经使用 React Router 实现了应用内路由。我用


使用 create-next-app 启动新的 Next.js 14 应用程序时,为什么会出现与 favicon.ico 相关的“模块未找到”错误?

我运行了以下命令来启动一个新的 Next.js 应用程序: npx create-next-app@latest 但是 npm run dev 给了我以下错误: 找不到模块:无法解析 'C:\xxxxx\xxxxx\xxxxx\my-app\src pp\


检查我在React Js中的路线

如果我在某条路线中导航,我想做一个三叶草,然后如果我在我想要的路线中,则有条件地执行一个函数,但我找不到一种方法来做到这一点。我想使用 React router dom 但如果...


Expo 路由器问题:React Native 中基于文件的路由出现不匹配的路由错误

我在 React Native 中遇到了 Expo Router 的令人沮丧的问题。尽管设置了基于文件的路由,但我仍然收到“不匹配的路由”错误。我的目标是引导用户


React、React Router、Joy UI:如何禁用导航离开和返回后重新出现的小吃栏?

我有一个虚拟的工作板 Web 应用程序,它使用 React 和 Joy UI 作为前端和 UI。我使用 Joy UI 的 Snackbar 组件在用户执行某些操作后临时弹出一条消息(


Vue 3 简单的包罗万象的后备路由在服务器上不起作用

我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时,它会打开页面,但是当我直接打开链接时,它会显示未找到错误。 { 不是芙...


导出或提交到 App Store 时 Xcode 崩溃

我在提交到 App Store 时遇到问题。当我尝试导出 .ipa 或在应用程序存档后使用提交功能时,Xcode 6.1 和 5.1.1 都会崩溃。以下是步骤


单个 Azure Function App 中的多个函数未部署

我有一个 Azure Function App,其中有两个函数在我的本地(Mac OS / Visual Studio Code / Node 20 / V4)上运行,在本地环境中测试时运行良好。 然而,一旦部署...


为什么 GAE appspot URL 路由到默认服务?

我正在将 python/django 应用程序的 3 个不同实例部署为项目中的 3 个不同服务。 app-devl 作为共享开发环境 app-test 作为测试环境 默认为


create-react-app的内容没有推送到github

我将 Go 和 React 代码推送到了 github。 Go代码已成功提交,但React代码未成功提交。 React 内容是由 create-react-app 创建的。 文章 ├ 应用程序接口 │ └ main.go └ 客户 └ 反应


create-react 应用程序的替代品是什么

我有一个基于 Create React App 构建的 React 项目,我正在探索替代构建工具。有哪些推荐的方法或工具可以从 Create React App 迁移出来?有什么经历或


在 Haskell 中注册信号处理程序,并根据状态执行操作

我有一些函数 app :: StateT AppState IO () ,它在进行大量计算和 IO 的同时维护一些应用程序状态(我已经定义了 main = void $ runStateT app initialState )。我想要...


如何更新 Play 商店应用程序包的包名称?

我按照步骤为我的 Flutter 应用程序签署了捆绑包。 比我将 build/app/outputs/bundle/release/app-release.aab 拖到 Google Play 控制台的应用程序包中,并收到错误 You need to use a different


Google App 脚本无法获取 Google Drive 上托管的 CSS 文件(403 未经授权)

我在 Google App 脚本访问 Google 云端硬盘托管资产时遇到问题。奇怪的是,它一直在工作,几天前才停止工作。 发生了什么:在


添加plugin:@typescript-eslint/recommended-requiring-type-checking后,提示tsconfig中未包含该文件

我用 npx create-react-app my-app --template typescript 创建一个项目,然后我向其中添加打字稿类型检查,但我的 App.tsx 报告以下错误: 解析错误:ESLint 已配置...


从 App Designer 到通用 .m 脚本文件的变量传输

我正在尝试将字符串(文件位置)从App Designer传输到.m脚本文件。 到目前为止,在应用程序设计器中我有: app.matfile = app.matfileEditField.Value; 应用程序目录=应用程序。


© www.soinside.com 2019 - 2024. All rights reserved.