问题标签 [react-router-component]

我在使用 react-router-component 时遇到了一些麻烦。

下一个代码至少适用于http://localhost:8080/#about之类的链接：

是否可以像下一个那样实现更深层次的路径处理：

?

文档没有关于该问题的示例。

谢谢！

我知道它很奇怪的用例，但我已经处于 PoC 的中间并且遇到了以下问题。

我在 autoGenerated 目录中有 X 个 jsx 文件（这些文件是使用 react-magic 库从 HTML 转换而来的）。现在我需要根据路径将它们动态加载到我的反应应用程序中。为了更清楚地查看代码片段。

从服务器下载的元素可以是纯 JSX 内容，也可以是带有 React.createClass 等的元素。这取决于我如何转换我的 html 代码。

究竟是什么问题？我无法将从 ajax 调用下载的字符串转换为实际组件。我也试过在组件方面这样做 - 我的意思是我有 generalComponent，它通过 ajax 下载内容（也获取字符串），我试图以某种方式将此字符串传递给渲染方法..它也没有工作。

当然，静态加载所有组件都不是选项，因为它们有数百个，甚至数千个。

你有什么线索吗？

使用 react-router 进行服务器端渲染本文档不足以理解如何使用 react-router 2 在服务器端渲染具有不同类型的 http 请求（如 get、post、put 等）的 react 组件。

我有一个简单的 Hello World 应用程序，其中一条路线没有子路线或索引路线。对于路由，我使用普通路由而不是 jsx sysntax。我再次使用 react-router 的动态路由来使用 webpack 加载 Hello 组件。我的app.jsx 文件有以下代码。

Hello.jsx 组件有以下代码

我试图弄清楚如何在 reactJS 服务器端（快速）网络应用程序中动态生成站点地图。我正在使用反应路由器。

我的应用程序有一个带有 4 个选项卡的选项卡组件。每个选项卡的内容都设置为单独的组件。我正在用 4 条不同的路线替换选项卡。我摆脱了选项卡并习惯于react-router设置 4 条路由，4 个组件中的每一个都有一个。

导航到和离开选项卡时，选项卡的内容将保持其状态。例如，假设用户在一个选项卡中滚动到列表底部。如果用户导航到不同的选项卡并返回，列表将保持滚动到底部。

我无法通过路由实现这种行为。我注意到，当我从一条路线导航到另一条路线时，组件会被重新实例化（而不仅仅是重新渲染）。

我想实现类似标签的行为。我知道有一个名为 UI-Router-Extras for Angular 的库，它提供深度状态重定向。但我找不到类似的 React 选项。我已经尝试过react-router并且react-router-component都在其路由变为活动状态时重新实例化组件。

是否有解决方案来实现 React 中路由的这种行为？

我的目标是定义一个嵌套的 url，如下所示： /dashboard/modules/12242433

我正在使用这个示例来建模我的代码：React Router Examples: dynamic-segments

这是我的渲染方法，它定义了我的路线

我可以转到/dashboard，但是一旦我尝试转到/dashboard/modulesor /dashboard/modules/123232，我就会收到一条似乎没有多大帮助的错误消息：

bundle.js:2 Uncaught SyntaxError: Unexpected token <

这是我的组件，我的理解是，只要我渲染了 comps 孩子，这应该可以工作。

仪表板

模块

模块

更新

事实证明我的代码是正确的（ish），但现在我更加困惑了。只要您通过单击到达某个 URL，此导航就可以工作：

<NavLink to="/dashboard/modules/SomeModName">View Mod</NavLink>

我一直在简单地通过/dashboard/modules/SomeModName输入 URL 来测试它，而这总是会中断的。

有没有办法让这个 URL 双向工作？

我发现了第二个错误，我认为它们是相关的..

当我单击将我带到/dashboard/modules它的链接时，它会正确加载，但是当我点击刷新时，它会给我原始错误。

我忽略了 React Router 的哪些核心部分？

第二次更新 当我从示例中本地提取此代码时，我能够重新引入错误（在详细视图中刷新时分页符）。但是，当您克隆整个 repo 并按原样运行时，刷新不会中断。是什么影响了这种行为？

React Router 主从示例

webpack.config.js

React-router-component 的官方 github 页面中提到如下：

例如，您可以为匿名用户和登录用户返回一组不同的允许位置。

这正是我想要实现的目标，但我实际上无法在任何地方找到如何做到这一点的教程。

所以基本上我想为登录用户和访客用户设置单独的路由器。访客路由器默认为登录页面，可能会重定向到登录错误页面或关于页面。当用户成功登录后，登录的路由器将获得控制权并默认进入系统概览页面。登录的路线还应该将导航面板呈现到每个页面。

可以用反应路由器做到这一点吗？

我想对不同的组件使用不同的参数。我测试了上面的代码，它不起作用。如果我改成这样，上面的代码就可以工作：

谢谢您的帮助

似乎如果我在 root onEnter 或 onChange 钩子中更改路径，则 url 将无限更改。但是，如果我更改子路线中的路径，它将起作用。实际上我想在一个地方处理身份验证，否则每个子路由都应该处理相同的逻辑。