问题标签 [react-router-redux]

将 react-router 与 redux-simple-router 一起使用时（可能会或可能不会导致问题），只要我在每个导航项链接上都有 require.ensure ，链接不会更改为活动状态，直到我点击单击链接后页面上的其他位置。

一步步：

1. 加载页面；一切安好
2. 单击a <Link />，视图发生变化；虽然，该链接尚未更新任何导航项目的活动状态
3. 单击页面上的某处，例如正文，活动状态现在正确地位于当前导航项上，而前一个导航项则关闭

这在使用之前没有发生require.ensure，也没有发生在我的生产服务器上，它有0.bundle.js和bundle.js. 它目前只发生在我的本地环境中，其中每个链接*.bundle.js为每个视图创建一个新文件。

一些示例路线：

还有我的路由器：

在我的导航中，我有这个：

根据 redux simple router docs，您可以从操作更新路由。我在文档中看不到如何做到这一点。有没有人有这方面的例子？

我将 react-router 和 redux-simple-router 与服务器端渲染结合使用，当我导航到如下网址时：

我希望能够some_state从请求中提取，以便我可以呈现初始的 redux 状态并将其发送回客户端。如何从服务器端的请求中提取状态？history 和 react-router 放在哪里？

这对移动设备尤其重要，因为正如我测试过的，桌面设备不会触发单独的请求，但移动设备会触发，这意味着页面会以全新的初始状态重新加载。

与我问的这个问题有点相关，当通过redux-simple-router和react router与历史 API 交互时，我在移动 chrome 中发现了一个相当令人沮丧的错误/实现细节。

我的场景很简单；我的应用程序有几个 url（使用浏览器历史记录对象制作得很漂亮）。例如，假设它们是/ /product, 和/contact。仅在/路线和/路线上，我有一个注册表单和一个标题组件（我也在使用 React），一个直接链接到该注册栏的注册按钮。

我如何实现这一点是在我的顶级应用程序组件中：

在每次页面更改时，都会滚动到页面顶部。但是，如果页面发生更改并且位置状态为非空，例如signup，则滚动不会发生任何事情。然后在处理我的/路由渲染的页面中，我检查状态以查看它是否等于signup，如果是，我滚动到注册表单组件。

导航是使用来自的动作创建者实现的redux-simple-router：

在每个移动浏览器上，该操作都非常有效。但是，在移动 chrome 上，每个路由操作，无论我是使用操作创建器还是Link来自 react 路由器的组件触发它，都会在导航时触发页面刷新，并且应用程序会丢失状态。因此，如果我点击注册按钮，则会触发页面更改，然后状态会丢失，因此当页面检查时this.props.location.state，它已被重置为 null。

现在我已经对此进行了广泛的测试，我在桌面 Chrome、Firefox 或 Safari 上没有问题，在 iOS 上的 Firefox、Opera 和 Safari 上也是如此。每个routeActions.push动作都会触发页面更改并保持状态。

有谁知道这里发生了什么？几个小时以来，我一直把头撞在墙上，试图弄清楚为什么它不能只在 iOS 上的 Chrome 上工作。它只是 Chrome 历史 API 的一个实现细节吗？如果是这样，为什么它不会影响桌面上的 Chrome 浏览器？

I'm struggling with what ought to be a simple thing using react-router (with redux-simple-router, fwiw).

I have some basic routes defined like so:

ScheduledReportList's redner method has the facilities to deal with the mine parameter, and logic to handle presence (or lack) of the name prop (snipping pieces that aren't relevant).

My problem is this: Client-side I can navigate quite well. Using the anchors or spans that call a routeActions.replace() or routeActions.push() then everything's fine. The problem is specifically when I'm in a "deep" path (i.e., one with a slash in it: /reports/fooReport versus /all) and I refresh the page, or if I try to navigate directly to it. Trying to load a /reports/foo page server-side gives me a SyntaxError: expected expression, got '<' error, as if it wasn't expecting the index.html that loads the webpack js. I can navigate to /mine just fine, which is kind of what isn't making sense.

What simple thing am I missing to get this working for both direct and indirect navigation? Thanks!

我试图弄清楚如何从路由内访问 redux 存储，以便我可以从路由内调度操作。

这是我的顶级组件的样子：

我的 redux-simple-router 代码如下所示：

如果我从 ExampleRoute 组件中转储道具，我将无权访问商店。任何帮助表示赞赏！

我有一个使用 react @0.14、redux @3.05、react-router @1.0.3 和 redux-simple-router @2.0.2 的应用程序。我正在尝试根据商店状态为我的一些路线配置 onEnter 转换。转换挂钩成功触发并将新状态推送到我的商店，这会更改 url。但是，页面上呈现的实际组件是路由匹配中的原始组件处理程序，而不是新 url 的新组件处理程序。

这是我的routes.js文件的样子

这是我Root.js插入 DOM 的组件

澄清一下，如果我转到“/workouts”，它将触发 onEnter authTransition 钩子，调度 redux-simple-router 推送操作，将 url 更改为“/login”，但会在页面上显示 Workout 组件。查看 Redux DevTools 显示这state -> router -> location -> pathname是“/login”。

状态流是

1. @@在里面
2. @@ROUTER/UPDATE_LOCATION（/锻炼）
3. @@ROUTER/UPDATE_LOCATION (/login)

我是否错误地将商店传递到路线？我不知道为什么下一个 Router/Update_Location 不起作用

我一直在尝试设置react++ ，react-router但没有成功。一切似乎都很好，直到我添加到混合物中，之后我得到reduxredux-simple-routerredux-simple-router

"[TypeError: Cannot read property 'listen' of undefined]即使我传入 BrowserHistory 对象。

这是代码 -

注意：我刚刚发现我正在使用renderToString(). 这就是为什么它没有定义？我该怎么办？

注2：如果我改为import BrowserHistory from 'react-router/lib/BrowserHistory'，我会得到

TypeError: history.listen is not a function;

我正在尝试使用react+ redux+ react-redux+react-router理念将我的组件连接到商店。即使父级用商店封装，我也会收到此错误：

代码（为简洁起见缩短了导入）

组件/Table.jsx

容器/BarcodeListing.jsx

路线.jsx

包.json

我正在做一个 i18n 实现。我有我的路线/:locale/rest/of/route，我想根据加载的语言环境传递字典。在路由配置上这样做会很酷。但我只能考虑在每个容器上这样做。但我的主要不确定性是代码重复。（在每个容器中this.props.dictionary[this.props.route.locale]）

是一种避免这种代码重复的方法吗？

这是我的配置文件：