问题标签 [react-router-redux]

作为参考，我使用 React-Redux Starter Kit ( https://github.com/davezuko/react-redux-starter-kit ) 作为基础项目布局。

我有一个名为 的路由TSP，我正在使用getComponent和 reduxconnect()在容器组件上注入一个 reducer，我希望它会children在 props 中传递。

getChildRoutesTSP 路由定义中的 永远不会被调用。

根路由器配置：

嵌套路由器配置 (TSP)：

我永远不会进入debugger内部getChildRoutes。

任何帮助表示赞赏，如果有更多需要查看的文件，我可以添加它们。

我目前正在使用 redux、react-router（带有 pushState History）和 react-router-redux 开发一个应用程序。我目前正在做的是将路由绑定到特定组件，就像我在每个文档中看到的最佳实践一样：

然后我在我的 Feed 组件中的某处有一个如下所示的 Link 组件，它负责显示一个特定的条目：

然后链接可以是 /f/123 之类的东西。因此，当我单击导航到项目 123 的链接时，组件 FeedItem 被加载。到目前为止，一切正常。我的 feeditem 也有一个特定的 reducer，connected mapstatetoprops。我认为这一切都做得很好。

但我现在的问题或疑问如下：

我有一个名为“SHOW_FEED_ITEM”的操作。如果用户直接导航到 url /f/123，则应使用此操作，但理想情况下，如果单击 Link 组件，也应使用此操作。

但是路由器实际上在做的是触发@@router/LOCATION_CHANGE动作。在我的减速器中，我能够处理这个动作并调度我自己的动作，但我不喜欢这个解决方案，因为我必须从那里再次解析路由 url 以重定向到所有这些路由的正确动作。

我现在正在做的是在我的 mapStateToProps 函数中接收 props.id（来自 Route f/:id）并将其传递给我的组件。这就是我的组件提供正确 id 的方式。

现在来到我的实际问题..

告诉路由器它应该处理哪个动作而不是告诉他应该加载哪些组件不是更好吗？

我知道我可以向调度我的操作的链接添加一个 onClick 处理程序，但这只会影响对链接的点击，不会影响浏览器来/回甚至刷新用户操作。

这可能现在已经可能了吗？你们是怎么处理的？

我正在使用 React + React-Router 和 React-redux 创建网站。这是我的商店和减速机：

我还没有任何动作，我稍后会添加它。然而，回到正题，这是 App Component，它是 React App 的入口点。

这个 App 组件将与 Redux-Router 的 connect 方法连接：

现在，最后，我将在 Provider 中提供 Router 组件而不是 ConnectedApp，并使用 ConnectedApp 作为索引组件。

现在，这就是问题所在。我想将 Redux Store 状态作为 Props 发送到子组件（PostsMain 或 PostsWrite），但我不知道如何传递它。每个子组件可能被渲染是由 React Router 决定的，并且每个组件没有任何由 Redux 存储的状态。

我看到了一些模块，如 React-Router-Redux、Redux-Router，但我想不使用它们。如果有人知道怎么做，请给我建议，我们将不胜感激。

我正在寻找调试此问题的任何建议。

通常，当我的 reactjs 应用程序启动时，它会将状态初始化为以下

该类CollectionData基本上是一个由immutable-jsmap 类型的许多属性组成的类。

但是出于某种原因，对于某个路线，状态被初始化为

我不知道如何将属性CollectionData更改为Symbol(react.element)

我想知道调试的最佳方法是什么initRoutes。

我正在使用这些依赖项：

编辑：

当我展开属性store和type: function Row(_ref2)时，我看到了这些属性：

1) 商店：validated: false

2）行：arguments: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context. at Function.remoteFunction (<anonymous>:3:14) at Object.InjectedScript.callFunctionOn (<anonymous>:124:124)

商店基本上一团糟，无法在 Redux Devtool（chrome 扩展）中检查。我认为这与此错误有关

所以我一直在尝试使用 React Hot Reload 3 - - 在我的项目中激活热重载，我目前在使用 React-Router 时遇到错误

[react-router] 你不能改变；它将被忽略

以及热重载根本不起作用的事实。

这是我的 WebpackConfig：

这是我的 Babel.rc

最后是我的 Index.js (Entry)

那么在我编辑代码时，我将如何实际配置我当前的项目以实际热重新加载组件？

我无法将 redux-devtools-extension 与 react-router-redux 的 syncHistoryWithStore 一起使用。我得到的错误是 Uncaught TypeError: store.getState is not a function。

syncHistoryWithStore@sync.js:38（匿名函数）@store.js:30

我的商店.js

我的 rootReducer.js

我的 main.js

我使用react+ react-router+ redux。我想创建一个全局的东西来处理应用程序中抛出的所有错误。是否可以同时捕获API调用错误和401状态？

我在Root.jsx：

它适用于我可以记录的严重错误。但是如果我想提供一些API错误怎么办？

例如：我想保存一些网格数据，但是服务器抛出了一个错误，即 10 个给定行中有 3 个没有保存（我知道这是一个常见问题，应该使用事务解决，但我Mongo在这里使用:P）。现在我想为用户显示一个简单的对话框，其中显示错误消息和 3 行未保存。如果我没有权限并且服务器抛出401状态码怎么办？可能我想将用户重定向到索引或登录页面。

这是一些假设的例子，因为我想简化我目前正在实施的事情。

我是新来的React，所以我现在不知道解决方案，但是如果我在 中编写相同的东西Angular，我会用它Angular's HTTP Interceptors来解决我的问题。我想我在这里需要类似的东西（或者也许这是一些常见的解决方案？）。

[编辑]

唔。看来我找到了解决我问题的方法：fetch-intercept

无论如何，您知道其他解决方案吗？

我正在寻找一种方法来“美观地”更新 React/Redux/React-Router/React-Router-Redux 应用程序地址栏中的路由，而不会在路由更改时实际导致组件重新挂载。

我正在使用 React CSS Transition Groups 为输入路线设置动画。所以当用户从

/home/

到

/home/profile/bob,

动画触发。

但是，一旦打开/home/profile/bob，用户可以向左/向右滑动以访问其他配置文件 -/home/profile/joe等等。

我希望地址栏中的 URL 在发生这种情况时更新，但目前这会导致profile组件重新挂载，这会重新触发 CSS 转换组，从而触发动画——我只希望在去的时候触发该动画从非配置文件路由到配置文件路由，而不是在配置文件路由之间切换时。

我希望这是有道理的。我本质上是在寻找一种方法来“美观地”更新应用程序 URL，而不强制重新安装管理该路由的组件。

目前我有一个我正在处理的示例，它是一个基本的主详细信息页面。此示例使用react-router-redux. 在详细信息面板中，我有许多选项卡，可以使用这些选项卡查看所选项目的不同方面......所有相当标准的东西。

当用户从主列表中选择一个项目时，点击<Link ... />发送到的 URL 类似于customer/123. 在为该 url 注册的路由（即:id）中，我有一个indexRoute路由，它replaces是到 default route/tab 的路由/customer/${nextState.params.id}/address。

所有这些都运行良好，用户可以很好地在选项卡之间导航。当用户关闭详细信息窗口并选择不同的详细信息时，就会出现问题。正如预期的那样，它会根据indexRoute. 在正常情况下，这可能没问题，但我希望它记住选择了哪条路线。我想知道是否有人对如何做到这一点有想法？

我想我可以通过使用 的onClick事件注册一个回调Link并调度一个事件来实现这一点，这将导致key选定的选项卡保存在store. 然后在onEnter我indexRoute可以访问商店并拉出这个保存的状态并将目标定位replace到这个那个项目。

这应该可行，但似乎很多，只是想知道这对其他人是否正确？

所以我在路由加载时动态注入 Sagas

injectAsyncSagas像这样：

在哪里store.runSaga，sagaMiddleware.run在商店创建期间创建。

当路由加载时，saga 成功启动。它正在监听动作。

当我加载路线时，“Start mySagaFunction”得到了安慰。如果我派遣 SOME_HOME_PAGE_ACTION，它会成功完成它必须做的任何事情。当我离开页面时，反应路由器调用 LOCATION_CHANGE，Saga 控制台“停止 mySagaFunction”，暗示它成功退出了 while 循环。

然后我去另一条路线，然后回到这条路线。这次 LOCATION_CHANGE 由路由器分派，正如预期的那样。但 Saga 正在启动，然后立即停止。我的控制台是这样的：

在 Redux 开发工具中，我只看到一个 LOCATION_CHANGE。我如何弄清楚为什么 Saga 开始并立即停止？只有当我回到路线时才会发生这种情况。

我想也许 LOCATION_CHANGE 派送晚了。但不是。在我的减速器中，我安慰了动作类型。首先使用 LOCATION_CHANGE 调用 Reducer，然后 saga 开始，然后 saga 停止。

我Link用来在页面之间导航。我也试过browserHistory.push(url)了dispatch(push(url))。结果相同。

注意：我得到了从react-boilerplate注入 sagas 的代码。我只使用了这段代码，我没有使用样板本身。我运行了样板文件，但那里没有发生此错误。区别在于：

• 它selectLocationState在 syncHistoryWithStore 中使用。我的整个商店都不是不可变的，所以我不需要它。
• 它使用它自己的routeReducer而不是routerReducerfrom react-router-redux。我不知道为什么，可能是因为完整的不可变存储。

无论如何，在样板代码中，我删除了上述两点，但仍然没有发生这种情况。