问题标签 [react-router-redux]

我正在构建一个 Menu 组件，它呈现使用 react-router Link 组件创建的链接列表。

这是呈现菜单的每个项目的代码：

菜单是动态的。这意味着导航到另一个 url 可能会使用不同的链接列表重新呈现菜单。问题是，当重新渲染菜单时，我得到以下异常：

我检查了 .0.0.0.4.$12.0 元素是<a>Link 组件在第一次渲染中生成的标签。
我还检查过，如果我不使用 Link 组件（例如，使用简单的<a>标签），异常就会消失。有什么想法吗？

更新：当我开始使用 react-router-redux（以前的 redux-simple-router）时，显然出现了错误。

我和我的同事正在尝试将redux-simple-router导航（我们已经工作了一段时间）包装在一个ReactTransitionGroup元素中，以便可以在路线更改时调用其生命周期方法。我们已经尝试了一大堆版本，但还没有找到让它工作的方法。

我们当前的迭代在ReactTransitionGroup( 的子级Provider) 下创建了一个包装器，以便可以在路由状态和子级都可以访问的地方定义生命周期方法。这个包装器的渲染和componentWillAppear方法肯定会在初始应用程序加载时（在浏览器中）调用，但在应用程序的页面之间导航（使用 Redux 简单路由器）时不会调用。该代码或多或少都在此要点上。

最值得注意的是，我们每次都尝试使用cloneElementReact 中的方法使用重新生成的键（例如 through history.createKey()），但无法让生命周期方法在任何路由更改时触发。

ReactTransitionGroup将简单路由器组件包装在with中的惯用方式是redux-simple-router什么？

更新

我尝试了一个新版本，在其中我用自己的TransitionWrapper类包装每个单独的路线，如第二个要点（受此答案启发）。

当它TransitionWrapper扩展时React.Component（如示例中所示），该render方法被调用，但没有别的。该站点运行良好（但我无法访问转换挂钩）。

当它 extends 时，我在对象上的方法的ReactTransitionGroup第 99 行遇到了一个错误，其中的一个片段如下：performAppearReactTransitionGroup

未捕获的类型错误：无法读取未定义的属性“componentWillAppear”

这被提出来了，因为this.refs它是一个空对象。（key是正确的）。

值得注意的是，如果我关闭 Chrome 调试器以便跳过错误，该站点仍然可以正常工作。

我将 redux-simple-router 移植到样板 react/redux 同构工具包（https://github.com/erikras/react-redux-universal-hot-example）中。我有一个简单的单击事件处理程序，它从 redux-simple-router 调用“pushPath”。但是，pushPath 似乎没有更新我的 URL。我已经实现了初始端口（syncReduxAndRouter），其他路由似乎工作正常（其他路由使用 updatePath）。我还需要做些什么才能使其正常工作吗？

这是带有修复程序的代码版本。我需要使用一个连接到 store 的 redux-simple-router 实例，然后将其方法作为道具传递给组件。

使用 react-router 时，Hashbang(#!) 会附加到 url。

例如：http://localhost:3000/#!/？

示例代码：

如何从 URL 中删除 Hashbang？

我将 Redux 与 redux-simple-router 一起使用。

这就是我想要做的。用户点击如下 URL： 配置文件的 ID 在http://localhost:3000/#/profile/kSzHKGX 哪里。kSzHKGX这应该路由到 Profile 容器，其中填写了带有 id 的配置文件的详细信息kSzHKGX。

我的路线如下所示：

所以点击上面的链接会给我Warning: [react-router] Location "undefined" did not match any routes

我的容器如下所示：

所以通常我的容器会像往常一样从 Redux 中的状态填充。

基本上我需要有办法在路线中做一些通配符。比我需要将 URL 传递给从 API 中提取正确配置文件的操作。问题是，react-simple-router 是否可行？我可以使用 UPDATE_PATH 以某种方式做到这一点吗？这会是正确的 Redux 方式吗？还是我应该使用其他东西？

假设我有一些逻辑，用户有一个可供选择的选项列表。当用户选择一个选项时，应用程序状态和 URL 应该反映这个选择。我已经弄清楚了 URL 路由，但我想知道最好的策略。我想使用 redux-simple-router pushPath 并调度一个动作吗？redux-simple-router 是否有 API 可以直接通过路由更改应用程序的状态？或者我会在其他地方处理应用程序状态更改吗？代码如下：

我正在尝试将 react-router 2.0 与 redux-simple-router 一起使用，但我无法让它与查询解析一起使用。这是我从文档中得到的：

但是，如果我像这样将历史记录传递给 redux-simple-router ...

......我明白了history.listen is not a function。直接使用 react-router 中的 browserHistory 似乎与 redux-simple-router 一起工作得很好。为什么历史记录中缺少listen()，我该如何解决这个问题？

我想定义一个可用于注销用户的 URL（发送将注销用户的操作）。我还没有找到展示如何实现路由分派事件的示例。

这是我的入口点文件：

从我能收集到的信息来看，这似乎是相当标准的。但是，我对如何将道具从App例如Dashboard组件向下获取有点困惑。这是App组件：

抱歉，代码不是更简洁一点，但我特别试图将authState（从我的 Reducer）传递给Dashboard组件，我对它如何与 React Router 和库一起工作有点困惑redux-simple-router......

编辑：

我更改了Dashboard组件以将其包含在底部：

我现在可以访问 Redux 状态和操作。我不确定这是否是正确的方法，但它现在有效......

我正在尝试使用 导航到另一条路径redux-simple-router。这是我的组件片段（参见handleSubmit方法）：

这不是将我带到指定的路径，而是将 UPDATE_PATH 分派 2 到 4 次，而不是刷新页面并将我带到http://localhost:3000/?#/home. 我错过了什么？导航到页面的正确方法是什么？网络上有没有对事件进行页面导航的示例？