问题标签 [react-router]

我试图找出通过我的路线传递数据的最佳方式。我知道我可以使用参数，但某些类型的数据不属于参数。

例如：我有一个显示应用程序列表的索引页。每个应用程序旁边都有一个按钮，可将您引导至该应用程序的视图。

我想将应用程序本身传递给应用程序处理程序。但是，通过 params 传递整个应用程序是没有意义的。尽管将应用程序标识符传递给参数（即：id 或 :name）确实有意义

所以我认为我应该这样做的方式是将应用程序标识符传递给参数，然后在应用程序组件中搜索我的 ApplicationStore 以获取给定标识符的适当应用程序。

但是，通过应用程序本身不是更容易更快吗？有没有办法做到这一点。有理由不这样做吗？

这是一些代码：

<Link to="showApplication" params={{name: application.name}}>View</Link>

或者

<Link to="showApplication" params={{application: application}}>View</Link>

提前致谢！

我最近开始使用 react 和 webpack，虽然它在大多数方面都很棒，但是在测试应用程序时会渲染到 iframe 中，这使我无法直接加载非 root 路由。因此，如果我想测试http://localhost:8000/#/signin我无法加载该 url，而是我必须加载基本 url 并单击其中指向登录页面的链接（或者至少这是我发现的唯一可行的方法）。

有一个更好的方法吗？

这是一个类似的问题，有一个非常老套的解决方案。从那以后有什么改变吗？

我正在尝试将 React 的低级动画 API（即 ReactTransitionGroup）与 React Router 一起使用，这样我就可以使用 requestAnimationFrame 而不是 CSS 来制作过渡动画。有谁知道如何在与每个路由关联的组件上调用特殊的生命周期挂钩？

我尝试将 RouteHandler 组件包装在 ReactTransitionGroup 中，但当前路由组件的“componentWillLeave”事件在更改路由时不会触发。

这是一个说明我的问题的 JSFiddle：http: //jsfiddle.net/d2mnwqLj/3/

我注意到 react-router 中有一个奇怪的行为。我的路线定义如下：

在我们的https://github.com/shovon/generator-react-material-ui的分支中。

单击 LeftNav 中的链接会产生预期的结果。启动 gulp 后，从 / 到 /home 的重定向有效。当我输入类似http://localhost:3000/#/some-undefined-route. 正如预期的那样，DefaultRoute 处理程序接管，并且主页内容可见。但是，奇怪的 URL 仍然存在。我期望任何未定义的路由重定向到预定义的包罗万象。例如，我想http://localhost:3000/#/some-undefined-route自动重定向到http://localhost:3000/#/home——而不仅仅是显示该内容。

我们正在尝试使用 mixintransitionTo()来达到预期的效果，但我仍然想知道是否有人知道处理这个问题的“正确”方法。我还想知道我所看到的是否实际上是预期的反应路由器行为。如果我错过了什么，我很想得到启发。干杯!

更新

来自 react-router 的 taurose：

你有没有尝试过

<Redirect from="*" to=".." />

回复https://github.com/rackt/react-router/issues/732时。

可能对其有类似问题的其他人有所帮助的是要注意，您还必须为每个 sub-route 提供一个 Redirect。

显然，此设置旨在允许更详细的路线控制和处理 404 之类的事情。

最初，我们怀疑可能是这种情况，但我不明白 splat ( from="*") 是如何工作的。也许这对其他人有用。干杯。

我有一个组件，它以 2 条不同的路线（和）Edit呈现表单。CreateEdit

如果我在EditRoute来自服务器的组件请求数据以填充输入，否则它只会显示表单......

这个请求是在componentDidMount（正如 React 文档所说的那样）......</p>

这是我的问题：如果我在edit( /brands/1/edit) 并转到create( /brands/create)，我的组件不会通过componentDidMount. 为什么？就像我的组件保留在下一页一样。

Obs：调用渲染方法。我正在使用反应路由器。

我意识到我使用 react-router 的 ReactJS 应用程序没有任何外部链接。搜索引擎无法识别该站点有很多链接内容。Prerender.io 似乎是一个很好的解决方案，但我无法让它为我的 ReactJS 应用程序工作。

prerender.io 可以与 ReactJS 一起使用吗？如果没有，是否有另一种好方法可以在不进行所有渲染服务器端的情况下改善我的网站的 SEO？

编辑：经过进一步挖掘，我意识到这里的问题是 react-router 默认使用“#”，而不是“#！”。是否可以使用“#！”使 react-router 工作？

我有一个看起来像这样的路由配置（仅显示我认为可能相关的部分）：

现在，在我的设置反应文件中，我有以下内容：

如果我访问host.local/settings并记录this.getParams()一切正常，并且文件呈现Object {tab: undefined}在控制台中显示我。但是一旦我尝试host.local/settings/user- 我希望控制台返回类似的东西Object {tab: 'user'}- 整个事情就会在某个地方崩溃并开始抛出Uncaught SyntaxError: Unexpected token <控制台。

React 还很年轻，因此在许多情况下错误相当模糊。

我遵循了路径匹配指南中提供的规范，它看起来很标准，所以我只能假设这是 react-router 本身的问题，还是我遗漏了什么？

更新

tl; dr：这不是 react-router 的问题。

长版：

显然，事实证明问题不在于 ReactJS 也不在于 React-Router 本身。它主要涉及gulp-webserver上的一个错误（我用于开发使用代理来连接并行运行的单独项目）并在直接在浏览器上键入 URL 而不是通过链接访问时触发错误。

我做了一个测试，它在导航时工作正常，但在直接访问时崩溃，如this github issue所述，这基本上使我的功能性深度链接测试不可行，但在生产中应该可以工作。

更新 2

tl; dr：gulp-webserver 也不是问题。

就我而言，它relative与absolute路径有关，与前面提到的 gulp-webserver 没有任何问题。更具体地说，我必须确保您的脚本和 CSS 引用是绝对的，这样它就不会尝试在您输入 URL 的路径中找到它们。

例如：

您有两个 URL：/settings和/settings/account. 在这种情况下，如果您将脚本包含在后备文件中，类似于<script src="scripts/main.js"></script>，服务器将为它返回 404，因为/settings/scripts/main.js.

我很愚蠢，但万一其他人为此而堕落，我希望这会有所帮助。

我一直在尝试在我的一个应用程序中使用反应路由器。但我越来越

在线的

我一直在写的代码是

如有需要请询问，我也会提供路线相关的js

-- 编辑 -- 构建文件中的相关错误代码

我正在使用反应路由器。我在路由部分传递状态的地方。但是路由器仅第一次更新参数 这是代码的小提琴链接 这是表类

})

这是路由器

更新 这是表类：

我正在使用 History Api 使用 ajaxify 插件在我的网站中的页面之间切换，该插件依赖于来自该站点http://4nf.org/的 historyjs 。它使用请求仅更新页面中的 div 并保留其他所有内容（页眉、页脚）。

它工作得很好，但是当在某些页面中使用 reactjs 组件时，它就不能很好地工作了。

我正在使用 reactjs 从服务器呈现数据并在页面中表示它，但是当我切换页面时，react 不会重新加载页面中的内容，而是给我一个空白页面。

每次我获得页面时，如何让历史进入反应并使反应重新获取内容？

我下载了 chrome 的 react devtool 并且我认识到 react 组件仍然在我可以在每次页面更改时卸载并重新安装 react !!？

反应代码：

这个代码在页面之间导航。

当我加载主页时，React 代码运行良好，但是当我导航并返回主页时，它给了我一个空白页面，那么我该如何重新渲染反应？