js-routes 相关问题

如何将React项目用于html网站的整个子路由

我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？首页.html 进入React页面应用程序.js 我有一个现有的 HTML 页面和一个 React 项目。如何连接它们？ home.html <button>go to React page</button> 应用程序.js <BrowserRouter> <Routes> <Route path="/mypage" element={<Mypage />}> </Routes> </BrowserRouter> 我想点击“转到React页面”按钮，我可以导航到"/mypage"？该按钮应实现对 "/mypage" URL 的导航操作，该 URL 最好为您的 React 应用程序提供服务。 home.html 更新按钮以包含重定向到子路线的点击处理程序 <button onclick="navigateToReactApp()">go to React page</button> const navigateToReactApp = () => { window.location.href = "/mypage"; // check the path correctness }; 或者使用锚标记，这在语义上可能更正确。 <a href="/mypage">go to React page</a> App.js 通过设置 "/mypage" 属性，更新路由器以使所有路由/链接/等从托管/服务应用程序的 basename relative 工作。 <BrowserRouter basename="/mypage"> <Routes> <Route path="/" element={<Mypage />}> </Routes> </BrowserRouter>

如何停止渲染 app.js 中的组件

}> } /> <SideBar /> <Routes> <Route path='/' element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route path='/service' element={<Service />} /> </Route> </Routes> <Article /> </div> 我不想在服务组件中渲染文章组件。我怎么做？请帮助我。 Article组件无条件在路由内容下渲染。 <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Article /> // <-- always rendered! </div> 简单的解决方案就是从 JSX 中删除 Article： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='/service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> {/* <Article /> removed */} </div> 但这可能不是您真正想要的。另一种选择是有条件地在路线上渲染它。示例： <div className='App'> <SideBar /> <Routes> <Route element={<Body />}> <Route path='/' element={<Home />} /> <Route path='setting' element={<Setting />} /> </Route> <Route path='service' element={<ServiceLayout />}> <Route index element={<Service />} /> </Route> </Routes> <Route path='article' element={<Article /> } /> // <-- only on "/article" path </div>

如何以 Svelte 方式设置导出和开槽零件的样式？

Svelte slot 的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。在 html/js 中我可以这样做：身体{颜色：红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。</p> <p>在 html/js 中我可以做：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</code></pre> 的内容从内部（shadow dom）设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种（受控）跨界样式？（例如，当使用 <pre><code>AppShell::part(content)</code></pre> 时，我收到错误：</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

Angular 17 在开发环境中不接受带点 (.) 的路径，它只会直接抛出 404 错误

导出常量路由：Routes = [ { 路径：'foo.bar'，组件：ListComponent }， { 路径：'foobar'，组件：ListComponent }， example.com/foobar 运行良好，example.com/foo.bar 返回 40...

如何在 svelteKit api 目录中创建 catch-all 路由？

我正在 sveltekit 中创建 API 端点。所有 API 端点都位于 /src/routes/api/DIR 内。如何为任何不存在的 GET、POST、DELETE 和 PUT 请求创建主捕获所有路由？

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

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

从后台js到内容js的sendMessage不起作用，但内容js到后台js可以工作

content.js chrome.runtime.onMessage.addListener( （请求，发送者，发送响应）=>{ console.log("消息已收到"); console.log(请求、发送者、sendResponse); ...

JS对象变量作为键值赋值

这个语法在JS中是如何调用的：让名称=“asdf”；让 obj = { 名称 }; // <-- this

为什么我的 React 应用程序在 http://localhost:3000/static/js/bundle.js 处显示错误

启动我的 React 应用程序时收到以下消息：错误[对象对象]在handleError（http://localhost:3000/static/js/bundle.js:56279:58）在http://localhost:3000/static/js/bundl...

在 Sveltekit/Typescript 中使用 pdfjs

我需要在 sveltekit 4 typescript 项目中使用 pdfjs （当前 4.1.392）进行文本提取。这就是我尝试将 pdfjs 导入到我的 src/routes/+page.svelte 中的方法： ...</desc> <question vote="0"> <p>我需要在 sveltekit 4 typescript 项目中使用 pdfjs（当前版本 4.1.392）进行文本提取。这就是我尝试将 pdfjs 导入到我的 src/routes/+page.svelte 中的方法：</p> <pre><code><script lang="ts"> import * as pdfjs from 'pdfjs-dist/build/pdf'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker'; pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; </script> </code></pre> <p>但是，我收到错误消息“无效的'workerSrc'类型”。</p> <p>如何在 sveltekit/typescript 中使用 pdfjs？</p> </question> <answer tick="false" vote="0"> <p>你可以尝试做这样的事情：</p> <pre><code>import * as pdfjs from "pdfjs-dist"; pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.mjs", import.meta.url); </code></pre> <p>更多使用示例，可以访问PDF.js Github仓库： <a href="https://github.com/mozilla/pdf.js#online-demo" rel="nofollow noreferrer">https://github.com/mozilla/pdf.js#online-demo</a></p> </answer> <answer tick="true" vote="0"> <p>以下代码适用于 pdfjs-dist 4.2.67、svelte 4.2.15 和 typescript 5.4.5：</p> <pre><code><script lang="ts"> // @ts-nocheck import * as pdfjs from 'pdfjs-dist'; import * as pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs'; pdfjs.GlobalWorkerOptions.workerSrc = import.meta.url + 'pdfjs-dist/build/pdf.worker.mjs'; </script> </code></pre> </answer> </body></html>

自动完成功能不适用于 VSCode 中的 TypeScript + Node

所以如果我编写纯 JS (.js)，它的工作方式如下：但对于 TypeScript (.ts) 它不起作用：

Next JS Link 标签有时会从动态路由中删除“/”

我正在使用 Next JS 12.2.0。我有如下链接标签， {帖子标题} 问题是某些 href 结尾有

这个curl命令的node js等效项是什么？

我有这个curl命令，我需要在node js中编写：卷曲-X POST \ https://image.adobe.io/pie/psdService/renditionCreate \ -H“授权：不记名$令牌”\ -H“x-api-...

如何在p5.js和matter.js中用图像填充形状

我正在尝试使用 p5.js 和 Matter.js var Engine = Matter.Engine, 世界=物质.世界，身体=物质.身体，事件 = 事情.事件，身体=妈...

Odoo 15：覆盖已经通过 override 添加的 JS 功能

我正在尝试重写 Odoo 15 JS 函数，该函数已通过 Odoo 源代码中的 override 添加。我说的是“_getLinesToAdd”函数这是由“pos_coupon&qu...

在JS中解析JSON字符串[已关闭]

在JS文件中我有： {html: '测试代码 HTML', css: '测试代码 CSS'} 我如何解析它以获得 html 和 css 的值？这是我尝试过的： const json = JSON.parse(数据); 反对...

Framer-motion导入中断页面下一个Js

嗨，我正在尝试将框架运动导入到 Next Js 中的页面中。从“framer-motion”导入{motion} 这会破坏页面。我在终端中收到以下错误： /用户/.../站点/.../

javascript中有XNOR运算符吗

我是js新手，我想知道JS中是否有XNOR运算符。我尝试了 !(a^b) 但它给出了奇怪的结果。例如： var a,b=“aa”; ^b 这段代码返回 true，但是 I XNOR 返回 false。上...

JS现在支持多线程了吗？

我正在仔细阅读一些答案，但它们已经很旧了。有人知道这方面的最新进展吗？另外，JS 在不久的将来有可能变成多线程吗？罗...

如何使用Word js更新DocProperty字段

我正在使用 Word js 1.3 开发 Office 2016 Addin。该插件允许定义自定义属性并保存它们的值。我想在我的插件的 UI 中添加一个按钮来更新

searchble选择输入react js

嗨，当我向 React js TextField 组件添加选择时，我遇到问题，不允许输入，因此为了允许输入，我必须将选择设置为 false，但这不会打开包含...的下拉列表

如何在 Primereact (JS) 中更改 TabPanel (TabView) 的内容背景颜色？

如何更改 Primereact (JS) 中 TabPanel (TabView) 的内容背景颜色？理想情况下是页面的基本背景颜色，这里是黑色（我猜）。我想我必须修改...

如何使用 rusty_v8 处理异步操作

我正在尝试在 v8 (rusty_v8) 之上开发一个简单的 js 运行时，但我在异步方面遇到了一些麻烦。我有一个函数，它是 js 领域的入口点： fn message_from_worker(

对象变量作为键和值赋值[重复]

这个语法在JS中叫什么：让名称=“asdf”；让 obj = { 名称 }; // <-- this

如果没有定义如何添加全局变量

当 d3.js 迁移到版本 4 时，对 Api 进行了重大重写，并对模块化打包进行了更改。我不想升级到 d3.js 版本 4，但我必须重写 React/redu...

在 Electron-vite 中包含本地 JavaScript 库的 TypeScript 无法正确编译

我正在尝试将本地库导入到 vite-electron TypeScript 项目中。请原谅我对 vite-electron 和 JS 捆绑生态系统缺乏了解，我是 JS 和 TS 开发的新手......

在编写返回 jsx 的脚本时使用 .js 文件扩展名

我开始使用 React 作为我选择的 ui 框架。在我浏览文档时，我注意到当使用 create-react-app 脚本启动新的 React 样板时，他们使用了 .js

Adminjs 实现问题“无法在模块外部使用 import 语句”

我是 Node Express js 的新手。只是尝试使用express js 编写后端代码。现在我想在我的项目中添加adminjs。由于我是本节的新手，因此我遵循了

反应本机布局组件的编译是否与逻辑不同？

我试图理解 React 本机视图/布局代码的编译方式与逻辑代码的不同。我知道 JS 逻辑保存在 JS 包中并与本机应用程序通信...

从 pact-js 存储库运行示例时无法找到本机模块错误

我正在运行 pact-js 存储库中的消费者示例。重现下面的示例（我修改了文件以避免打字稿）：从 '@pact-foundation/pact' 导入 { PactV3, MatchersV3 }；导入...

Next JS (React) 不理解 stencil Prop

按照目前的流程，React 在我们的 SPA 中托管模板 JS 组件，像往常一样，随着范围的增加，它现在对 SEO 和性能产生影响，而且重点是我们无法改变主要架构......

研究新的.NET8 Blazor Web 应用程序。如何将 .js 添加到 .razor 页面？

应该很简单，但是我真的找不到将.js添加到项目中的方法。我使用如下简单代码创建了一个 .razor 页面： @页面“/文本” @rendermodeInteractiveAuto @inj...

如何在 JS 源中显示行级分析？

我读过这篇关于分析运行时性能的文章。下图是从这篇文章复制的。如果您检查此图像，接下来会出现黄色突出显示的 JS 文件执行时间提示...

通过 CDN 提供 JS 小部件

我需要做这件事，我必须在 vanilla js 中制作一个小部件（可交互）并通过 CDN 提供服务。对于服务，我想到了 Google 的 Cloud CDN。最终目标是一个模块化的小部件，任何人...

Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文（原因：CORS 缺少允许来源）

开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线路线::post('/login', [LoginController::class, '提交']); 并使用

Next js firebase（firestore数据库）自动生成的id错误

嗨，谁能告诉我，当我想在下一个 js 中获取页面的详细信息并且我从 firestore 数据库获取数据时，这对我来说是这样的 Firebase 初始化成功 page.js：32路由器。

三个js - 不同灯光的不同阴影贴图

我有一个带有两个灯光的三个 js 场景。我希望灯光 A 使用 PCFShadowMap，灯光 B 使用 BasicShadowMap。如何实现这一目标？我主要关心的是性能。我正在寻找一种投射方式

带有 JS 模块模式的 Rails 导入映射错误：“net::ERR_ABORTED 404（未找到）”

我正在使用 Importmap for Rails 7 实现 JavaScript 模块模式，并且遇到与在生产环境中加载自定义帮助程序 JS 文件相关的错误。我的应用程序/javascript 有一个

如何在没有js的情况下在页面内容上增加下拉菜单？

我的主页的菜单包括一个下拉菜单。我使用 html、css 和 php，但不使用 js。我无法让下拉菜单不下推页面内容，而是打开内容。你可以吗

重新打开Word js-addin“尝试打开外部应用程序”确认对话框

当我单击 Word JS-addin 中打开 ms-word:// url 的超链接时，我会看到以下确认对话框：但是，当我选中复选框并单击“取消”时，我从未收到此对话框

如何在preload()中自定义p5.js默认加载动画？

在p5.js中，当您使用预加载功能加载图像/声音时，会显示默认加载屏幕。它看起来像这样：这很好，但在我的游戏中，这个文本与黑色背景融为一体......

如何在Vite React JS项目中设置和使用别名？

我正在开发一个使用 Vite 作为捆绑器的 React JS 项目，我想使用别名改进我的项目的模块导入路径。有人可以提供有关如何设置和使用的分步指南吗

下面的Browser Engine图和JS Runtime图之间的桥梁是什么？

我一直在阅读有关浏览器如何工作以及浏览器的组件是什么的内容。我看到了各种关于浏览器如何解析 JS 和渲染过程等的文章，但我不是

在 JS 中在任何视口上将剪辑路径插入正方形

您好，这是一个显示我的问题的代码笔我正在尝试进行 JS 计算来更改 div 的剪辑路径插入，以便它显示一个正方形。有一个限制：正方形宽度有 t...

fullcalendar js 当长事件添加标题时每周都会出现。这是让标题出现一次的方法吗？

fullcalendar js 当长事件添加标题时每周都会出现。这是让标题出现一次的方法吗？我在 v5 和 v6 上尝试代码，标题每周都会出现。 ...

使用 JS 和 PHP SQL 查询获取 JSON 数据

函数 fetchBooks() { fetch('圣经书.php') .then(响应=> { 如果（！response.ok）{ throw new Error('网络响应不正常'); } 返回response.json(); ...

如何在 next js 13 的客户端组件中处理 firebase 和 webrtc 任务

我创建了一个 next js 13 应用程序来与 webrtc 和 firestore 共享相机源。这是我的 page.tsx。我无法使这个服务端因为我使用了反应钩子并且我无法将其移动到客户端

p5.js 在网页编辑器的 preload() 函数中加载时卡住了

我正在使用p5.js，我和我的朋友正在开发一个游戏来娱乐。我们正在使用网页编辑器。我们使用预加载功能导入了一些资源。这将显示加载屏幕。然而，...

React JS 中父项和子项之间的检查和取消检查逻辑

在React JS中，我面临着当我单击品牌时所有模型子项都被选中的问题。如果我取消选中品牌，所有模型儿童都会隐藏起来。帮我写一个逻辑，例如：- 如果我...

next js 仅显示编译/未找到而不渲染应用程序路由

浏览器控制台在我的下一个 js 应用程序中一切正常，我关闭笔记本电脑，当我启动我的应用程序时，它再次显示正在编译/未找到我的代码中一切正常

js-routes 相关问题

最新问题