问题标签 [react-static]

我有一个使用React Static构建的站点，该站点具有始终存在的 Header 组件。根据当前页面是否有 hero 组件，Header 应该是浅色或深色。

Header 在路由之外渲染，并useEffect在子渲染之前触发。这可能是因为路由。

这是当前代码：

将呈现的<Routes default />是在 React Static 中配置的静态页面static.config.js。

下面是 Hero 组件的示例：

当我运行应用程序并查看日志时，这就是我得到的：

尽管 Hero 在路由器中而 Header 不在，但我怎么能以某种方式从 Header 中检测到 Hero 的存在？这感觉像是一个很常见的用例，但我在互联网上找不到任何信息。

提前致谢！

我正在使用 JSON 数据开发一个静态站点。我替换了 react-static 默认示例中的帖子数据，它工作正常。

问题：当我/news在另一个 JSON 中添加带有一堆消息的另一个路由时，父路由/news工作正常，但子路由，例如/news/1/或/news/2/全部进入 404 页面。

在浏览器控制台中，我得到了错误 GET http://localhost:3000/__react-static__/routeInfo/news/1 404 (Not Found)

我不认为这些是动态路由，因为我可以在安装反应应用程序之前获取数据。我应该怎么做才能解决这个问题？

在我的 static.config.js

我在 /src/containers 中有一个 Message.js 作为

工作news.js如下

I need to use addPrefetchExcludes to register a dynamic route at runtime.

It needs to be placed before the the app code addPrefetchExcludes Docs

But i'm getting this error:

I'm have that line before the declaration of the App function

If i remove that function from my App.js the routes will be generated normally, so i don't think that the reason of the error should be related to the routes configuration.

App.js code

Dependencies

当页面使用 react-static 更改时，有没有办法滚动到顶部？我使用@reach/router的是默认包含的react-static。

我已经尝试过这个：

ans this (from this issue )

但两者都没有工作。

react-static 文档中提到了最后一个解决方案，但似乎已弃用，因为它不再在文档中。

我正在将使用版本 5.9.12 创建的 React Static 网站更新到版本 7.2.2。

似乎NavLink已从 React Static 中删除。使用以下代码，我得到一个错误：Cannot create styled-component for component: undefined.

如果它真的被删除了，我在 React Static 文档或互联网上都找不到。

我需要NavLink用别的东西代替吗？

我一直在使用 Create-React-App 并挖掘整个设置，基本上我希望继续使用 JSX 进行开发，而不是切换到 Gatsby/React-Static 的 Markdown/etc 编码风格。与这个关于 Gatsby 的问题类似。我正在寻找由 Gatsby 或 react-static 生成的搜索引擎优化的静态“公共”前端（例如产品页面、博客等）。但我也想要一个典型的客户端渲染的“私人”部分的 React 应用程序（例如，卖家可以编辑他们的产品页面）。我知道你可以设置“主页”，所以我正在考虑将私人部分设置为“example.com/in/”或类似的。

关于如何最好地拆分这个项目的任何建议？

我想使用 lib react-static-plugin-favicons显示一个网站图标。

我将它添加到我的 static.config.js ：

这是我的文件结构：

你能发现我做错了什么，因为它不起作用吗？谢谢

我遇到了 Typescript 和以下消息的问题：

{孩子：元素[]；图片网址：字符串；}' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'

类型“IntrinsicAttributes & { children?: ReactNode;”上不存在属性“pictureUrl” }'

我真的不明白我做错了什么，有人看到问题了吗？

这是我的应用程序组件：

我正在使用一个名为.libreact-tooltip的框架调用的库react-static。

但问题是它不支持 SSR，而且我在构建期间遇到了一些问题。

我还尝试验证文档，如果它undefined返回 null

但是没有任何效果......有人遇到过这个问题吗？是处理它的最佳方法吗？

是否可以从反应代码和 REST API 作为触发器生成静态 HTML 页面？我将提供一个用例来描述我的问题。

假设我正在使用 creat-react-app 构建一个简单的笔记 SPA 反应应用程序。UI 允许用户查看所有笔记的列表，添加、编辑和删除笔记。单击注释将链接到显示更多信息的注释页面。CRUD 操作是通过托管在使用 MongoDB 作为数据库的节点 js 服务器上的 REST API 完成的。

该笔记网站供课堂使用 - 一名教师有权进行 CRUD 操作，而所有学生完全被动，只能查看（阅读）数据。从这个角度来看，很明显，学生使用的网站可能是一个完全不同的 React 项目，具体来说，一个用于笔记列表的静态网站和一个用于每个笔记的静态网站——因为它只使用 REST API 获取数据并将其显示在a<NoteListItem />和<NotePage />react 对每个音符都相同的组件。

显示整个列表的静态页面可以包含一个动态获取列表的 div，但是当单击一个便笺时，将显示该便笺的静态网站。当老师添加新笔记时，将对 my-host/api/addNote 进行 API 调用，并且在该控制器的末尾，我希望添加一个generateStaticPage(noteId)生成该笔记静态页面的函数。

这是基本思想，这意味着在 SSR/react-static 中使用一些已知概念，您可以在其中定义动态范围、静态、模板等。

一个可能的解决方案是像 react-static 这样的库，但是如何在添加注释后立即构建页面？是否有任何图书馆可以帮助我实现这一目标？