问题标签 [react-router]

有时，在使用 React 库（例如react-router）时，我会收到以下错误：

未捕获的类型错误：无法读取未定义的属性“firstChild”
/~/react-router/~/react/lib/ReactMount.js?:606

我如何解决它？

我正在尝试nginx使用由react-router. 一切正常，直到我尝试在第二级 uri 上 F5 example.com/MyApp/users。

我的静态资源在example.com/MyApp/resources. example.com/MyApp/users/resources问题是，每当我尝试直接访问（或 F5）users视图时，nginx 都会尝试加载我的资源。

这是我的 nginx 配置：

我是 nginx 的新手，所以我真的不知道一切是如何工作的......

编辑 ：

我将我的 conf 更改为：

现在访问example.com/MyApp/users作品但example.com/MyApp/users/没有。

我正在使用willTransitionTo静态方法进行身份验证。 这是我有点遵循的例子。

我transition.retry()将与原始查询字符串一起前往原始路线。但是查询字符串在开头缺少问号，因此不是转到过渡中预期的路线，而是/authToken=xyz123

所以，

• 用户访问http://wickedsweet-react-site.com/?authToken=xyz123
• 将路由（通过transition.redirect）反应到http://wickedsweet-react-site.com/waitforserverauth
• 服务器正在验证并返回
• 将路由（通过transition.retry()）反应到http://wickedsweet-react-site.com/authToken=xyz123 哎呀

我怎样才能避免剥离?？顺便说一句，此时我什至不需要 authToken 查询字符串，因为我们已经进行了身份验证，但现在，这是次要问题。

这是我的willTransitionTo方法。

对于身份验证，我将一个令牌传递给一个名为“authToken”的查询字符串参数。当用户传入 authToken 时，我willTransitionTo会要求服务器进行身份验证并将用户重定向到侦听服务器身份验证的 WaitingForAuth 页面。这是 WaitingForAuth React 页面。

当服务器返回 auth 并且令牌有效时，WaitingForAuth 实现componentWillUpdate，然后重试因重定向而中止的原始转换。

我想在单击组件链接时更改 URL，与它们当前默认更改的方式相同，但不会将它们推送到浏览器历史记录。我在这个答案中发现以下内容适用于某人：

this.props.activeRouteHandler({key: "anystring"})

但我不知道我应该把它放在哪里，它是否还能工作。有人可以给我一个例子吗？谢谢

我在 React-Router 中设置了一些嵌套路由（我正在使用 v0.11.6），但是每当我尝试访问其中一个嵌套路由时，它都会触发父路由。

我的路线如下所示：

如果我将路线折叠起来，它看起来像：

它工作正常。我嵌套的原因是因为我将在“仪表板”下有多个孩子，并希望它们都dashboard在 URL 中加上前缀。

我想知道React Router是否有某种方法可以通过路由配置获取所有可能路径的列表？

例如，从此：

我想要：

["/", "/about", "/blog"]

我正在尝试使用 react-router 进行服务器端渲染，但最终还是失败了。react-router 的<Handler />火中没有点击处理程序，但生命周期事件，例如componentDidMountdo。

服务器接收到一个请求，通过 react-router 运行它并输出 HTML：

路由.js

服务器.js

索引.jade

您可以看到这里有 2 个React组件；content（来自 react-router 的结果视图）和test（带有 onClick 的简单按钮）

在客户端上加载 HTML 后，我的client.js脚本就会运行，它可以React检查并绑定到组件：

问题是没有任何onClick处理程序为内部的任何组件运行<Handler />，包括react-router组件<Link />。然而<Test /> ，火完全没问题。

这是其中一个页面的标记<Handler />：

这是工作<Test />组件：

更新 1

即使我删除服务器端渲染并<Handler />在客户端上渲染，问题仍然存在。

更新 2

上面的页面示例在父组件中呈现：

更新 3

我在没有使用Browserify、React和react-router作为全局对象的情况下复制了它，它工作得非常好......

解决方案 A

通过添加browserify-shim到我的构建过程并将其设置为使用React和react-router从它的window而不是node_modules它的工作。这不是最干净的解决方案，但仍然很好地适合同构的东西。我仍然想知道为什么使用Reactfromnode_modules会导致这个问题。

browserify-shim 配置：

更新 4

在玩了一些之后，似乎只有react-router它不能很好地与Browserify. 简单React且Browserify工作正常。

我有一个向用户发送验证电子邮件的应用程序。从这里，用户必须单击如下所示的电子邮件验证链接： http ://example.com/#/verify/5133110562f8cb5171ff0033 。Safari 和 Firefox 都没有点击此链接，而是自动重定向到http://example.com/。这会阻止用户注册。我检查了我们的后端，验证用户的路由从未被点击，这意味着这个链接在 Firefox 或 Safari 中从未真正被点击。关于为什么这会在 Chrome 中起作用但在其他两个中不起作用的任何想法？

编辑我最初认为这个问题完全是由于浏览器造成的，但我实际上认为它可能来自 react-router，我用它来处理我的 ReactJS 应用程序中的路由。

我的 React.js 应用程序使用React Router具有以下结构：

我想将一些属性传递给Comments组件。

（通常我会这样做<Comments myprop="value" />）

使用 React Router 最简单和正确的方法是什么？

state我在获取由 react-router 在具有动态段的路径上加载的组件时遇到问题/item/:id：

这些方法中的任何一个componentDidMount都componentWillReceiveProps不会被调用！

并渲染日志空data对象，因为它刚刚初始化..

路由器看起来像：