问题标签 [react-router-v4]

下面实际上可以渲染 App 组件，加上路由指定的一个组件，this.props.children它将在App.js. 但它是 react-router v4 的首选或正确方法吗？

方法一

方法二

在 react-router v2 和 v3 中，我们可以做

但是在 react-router v4 中，如果我们需要做的就是this.props.history.push()而不是使用context：

那么我们可以跳过 的导入PropTypes和定义contextTypes吗？所以改变路径就像this.props.history.push("/");我们使用 react-router v4 一样简单？

如果路径是，则将呈现/posts/new组件PostsNew及其以下组件，并且匹配，并且是单词而不是数字：PostsShow:ididnew

在 App.js 中：

怎么/posts/new不能匹配两次？

我正在尝试在成功验证后从 login.js 导航到 app.js。使用路由器 v3 和浏览器历史记录，我能够相对容易地做到这一点。我不太确定如何使用路由器 v4 导航页面，因为它们的方法似乎非常不同，而且我以前使用的方法不再有效。我尝试在 React-Router v4 中引用这篇文章 Navigating Programatically，但这些建议对我不起作用。关于如何使用 v4 遍历我的应用程序中的页面的任何建议？

这是一个电子应用程序

索引.js

登录.js

应用程序.js

我有一个 React 应用程序，它共享一个外部脚本文件以使用 vanilla JS 构建公司范围的标题。在该标头中是一个徽标，该徽标动态绑定到调用它的任何应用程序的根目录 ( location.origin)。

捕获点击导航并使用 React Router v3 之前是微不足道的，因为在您设置路由的任何地方都可以访问 browserHistory：

使用 React Router v4 ( react-router-dom)，我如何在不将侦听器绑定到组件内部某处并使用的情况下完成此操作props.history？

我对反应比较陌生，我正在尝试弄清楚如何让反应路由器工作。我有一个超级简单的测试应用程序，如下所示：

当我运行应用程序时，主页组件加载没有任何问题，当我单击“单击我”链接时，url 更改为 localhost/about，但是没有任何反应。如果我单击刷新，我会收到“无法获取 /about”。显然我做错了什么，但我无法弄清楚是什么。我也在使用 Webpack。

不要费心阅读问题，最后有一个解决方案

我有以下路由器，使用react-router 4

该Page组件如下所示：

SiteHeader, SiteFooter,HomePage和CoursePage是纯表示组件；他们把道具吐出来。没有连接到 redux 商店或任何东西。HomePage并被CoursePage定义为类。

在里面HomePage，CoursePage我需要使用componentDidMount钩子，以便与 DOM 交互。

现在发生了以下奇怪的事情：

第 1 步：我从/url重新加载应用程序

• Page执行的渲染函数
• HomePageexecute的构造函数
• componentDidMountofHomePage执行_

第 2 步：我导航到/courses/:courseName

• Page执行的渲染函数
• componentWillUnmountofHomePage执行_
• CoursePageexecute的构造函数

注意componentDidMountof是如何CoursePage不触发的。这很重要，因为我需要componentDidMount钩子。

第 3 步：我导航回/从/courses/:courseName

• Page执行的渲染函数
• HomePageexecute的构造函数
• componentWillUnmountofCoursePage执行_
• componentDidMountofHomePage执行_

第 4 步：我再次导航回/courses/:courseNamefrom/

• Page执行的渲染函数
• componentWillUnmountofHomePage执行_
• CoursePageexecute的构造函数
• componentDidMountofCoursePage执行_

笔记

• /courses/:courseName如果在第 1 步中我从而不是从 重新加载，而/不是从我放置HomePage它的位置重新加载，则会发生完全相同的事情，CoursePage反之亦然。
• 我总是丢失第componentDidMount2 步（第一个重定向）。之后，所有componentDidMount功能都按预期正常触发。
• 注意第 3 步和第 4 步中的粗体部分是如何以相反的顺序触发的。我不确定这是否有任何意义。

问题

• 为什么在第 2 步中 Routecomponent没有触发它的componentDidMount方法？我是否在这里遗漏了一些非常明显的东西，是我不知道的一些神秘知识还是我遇到了错误？

• 奖励：在ofHomePage之前触发的构造函数是怎么回事，而当我们从to导航时，相反的不是真的？componentWillUnmountCoursePage//courses/:coursName

根据文档

当你使用组件（而不是下面的渲染）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果你提供一个内联函数，你会在每次渲染时创建一个新组件。这会导致现有组件卸载和新组件安装，而不是仅仅更新现有组件。

这让我的问题变得更没有意义

我找到的解决方法

在我的Page组件中，如果我只是移动这样的children顺序

那么问题就解决了，但是我不认为这是一个适当的解决方案。我真的很想知道发生了什么，因为它让我心碎。

编辑：

为了简洁起见，对问题进行了编辑并使用例场景更简单

更新 - 进一步观察

让我们Stub.jsx成为以下组件

并MockPage.jsx成为以下组件

然后以下所有配置正确播放，这意味着componentDidMount重定向之间不会丢失呼叫：

一个）

二）

最后更新：

发现问题！

问题显然是react-addon-perf我在导入到SiteHeader组件的按钮中使用的问题。Perf 工具在发生的第一次重定向时抛出了一个错误，这扰乱了随后组件的生命周期钩子。这解释了当我在一切正常children之前移动位置的事实。SiteHeader感谢任何打扰阅读我的胡言乱语并抱歉浪费您时间的人。

我尝试迁移到 react-router v4，我应该从哪里开始？对于大多数路径，我需要身份验证和重定向。我安装了最后一个 react-router-dom@next 和 react-router@next。现在，当用户没有登录重定向到登录页面时，我也有登录回调，但是有一个错误 WebSocket connection to 'ws://localhost:9998/sockjs-node/472/gnanejj3/websocket' failed: WebSocket is closed before建立连接。

应用程序.js

路线.js：

我正在使用react-router v4进行路由，解析查询参数，history.listen 这里推荐使用

我在生命周期钩子中调用它componentDidMount以确保组件已安装，以便我可以使用这样的高阶组件将其作为组件状态提供：

当history.listen路由导航到新页面或将新查询参数添加到页面时，永远不会触发。

当路由通过反应路由器 v4 更改时，有什么方法可以触发事件。我需要在每次路由更改时触发一个函数。我在通用 react-redux 应用程序的客户端使用BrowserRouterand Switchfrom react-router-dom。