问题标签 [connected-react-router]

我有一个使用 redux、connected-react-router、redux saga 和 redux persist 的 react web 应用程序以及带有 react-hot-loader 和 webpack 的 HMR。在对大多数包进行重大更新后，我注意到没有输入/执行 sagas。

相关包的当前版本为：“react”：“^16.7.0”、“react-redux”：“^6.0.0”、“redux”：“^4.0.1”、“redux-persist”： “5.6.12”、“redux-saga”：“^1.0.1”、“react-hot-loader”：“^4.6.5”、“connected-react-router”：“^6.2.2”、“ webpack": "^4.29.3"。

我已经尝试将 HMR 实现从 v4 恢复到更低的版本，但我相信这是可行的。我还认为它可能是连接的反应路由器的实现，但我现在对此也很有信心（但我会同时展示两者以供参考）。我猜这是我的 redux 商店配置周围的东西，但我想如果我知道我不会寻求帮助。

index.js 文件（应用程序入口点）

根减速器：

根传奇：

App.js（仅相关位）：

存储配置：

授权传奇：

我希望 watchAuthentication 中的控制台日志能够运行，但它永远不会运行。我相信问题出在商店配置上，但此时我正在猜测并抓住稻草，因为我不知道在哪里看。我知道这是一个复杂的问题，我感谢任何人可以提供的任何帮助。提前致谢！！

我正在尝试找出一种将用户的身份验证状态存储在redux商店内的方法。假设isAuthenticated存储用户是否登录的状态。现在，我有一个由服务器发送的 cookie(httpOnly) 来记住用户，这样他们就不需要在每次访问应用程序时都输入凭据。
流程：用户某天登录到应用程序但没有注销并关闭浏览器。现在，他回来访问我的应用程序。由于 cookie 存在于浏览器中，这将由应用程序自动发送（无需用户交互），如果 cookie 有效，isAuthenticated: true. 很简单的要求。
跟踪身份验证状态应该是应用程序完成的第一件事，所以我把这个逻辑放在第一位，在 App.js 呈现之前。

这是configureStore()

store.dispatch({ type: AUTH.AUTO_LOGIN });是我尝试应用程序将自动登录作为应用程序中的第一个操作的代码。这个动作由一个redux-saga

autoLoginApi是对axios携带 cookie 的服务器的调用。setAuthenticationStatus(true)是将设置为的动作创建isAuthenticated者true false。

所以，是的，这是有效的，但并不像预期的那样。因为，应用程序应该首先设置第 isAuthenticated一个，然后继续 App.js 渲染（）。但是，由于设置了isAuthenticated一些秒（api调用），应用程序首先呈现，isAuthenticated: false然后在AUTH.AUTO_LOGIN完成后，然后应用程序为经过身份验证的用户重新呈现。

那有什么问题呢？对于普通组件，它可能不是问题，例如这个SiteHeader组件

但是，此解决方案不适用于自定义路由。

PrivateHomeRoute在 redux 存储更新之前得到解决，因此 Route 总是转到"/login".

我正在寻找一种解决方案，在该解决方案中，应用程序在身份验证操作未完成之前不会继续进行。但是，我不知道在哪里放置该代码？

我尝试了几件事：

1. async awaiton configureStore()- 错误来了
2. async await开App.js- 错误

PS：我正在使用 redux、redux-saga、react-router-dom、connected-react-router、axios 的库

我有一个带有 react-router-dom、connected-react-router 和 react-redux 的应用程序，我已将它们全部更新到可用的最新稳定版本。

现在由于某种原因，商店没有被传递给 ConnectedRoute 的子组件。

包.json

减速器.js

configureStore.js

应用程序.js

索引.js

PrivateRoute.js

PrivateRouteContainer.js

你们知道我在这个设置上做错了什么吗？它看起来像他们在他们的文档中描述的那样，但是当我 console.log(this.props) 时，我只得到与历史相关的道具，没有别的。

我是新来的反应，我想使用带有路由的redux（带有redux-react-hook）的react hooks（我使用connected-react-router，但我可以切换到另一个lib）

我将商店传递给 StoreContext Provider，一切正常，但是当我添加具有正确上下文的 ConnectedRouter 时，我得到了错误。

这是我正在尝试的

但我收到此错误：

我做错了什么还是 ConnectedRouter 与 redux-react-hook 不兼容？

我试图让 React 应用程序与 React Router 和 Redux 一起正常工作，但我不断TypeError: Cannot read property 'location' of undefined地使用任何具有 redux 的组件。我正在使用connected-react-routerlib 在商店中注册路由器，但显然我做错了什么

存储/configureStore.js

减速器/index.js

所以基本上我正在做一个登录请求，成功后我想发送响应并将用户重定向到个人资料页面。

因此，调度响应工作正常，但在进行dispatch(push('/profile'));URL 更改时，但配置文件组件不会被呈现。

如果我只是在没有 axios 请求的情况下执行以下代码，它可以正常工作并重定向。

我想要做的实际代码。在发送了可以正常工作的响应之后，我的 redux 商店得到了更新，但重定向不起作用。它将 url 更改为 /profile 但视图没有改变

配置存储：

Connected React Router 导出类型RouterState非常棒！但是我没有看到match. 假设这些也可以导入并添加到减速器中，例如RouterState下面和减速器中使用的：

https://github.com/supasate/connected-react-router/blob/master/examples/typescript/src/reducers/index.ts#L13

没有它，你就不能真正this.props.match在连接的组件中使用它来匹配参数等。对于那些使用 TypeScript 并且还需要添加到 reducer 的人来说，这里有解决方法吗？或者我在这里错过了一个关键部分？非常感谢！

我将 connected-react-router 与我的 react redux 应用程序一起使用。我需要服务器端渲染和客户端渲染（我通过limenius react bundle 在symfony twig 模板中使用react 组件）。

我的问题是我无法正确使用 basename。我的 URL 中有一个区域设置 isocode (www.localhost.com/fr/mypage)

如果我在历史记录中声明一个基本名称“/fr/”：

有效！

...但我想要这个：

它不起作用！

我的 app.js 中有什么：

在我的 store.js 中

我对 app.js 的期望：

我读过 react-router 提供的“browserRouter”和“staticRouter”的基本名称应该在 ConnectRouter 组件的历史道具中声明。

我做错了什么？connect-react-router 是我的 redux ssr 应用程序的好选择还是我应该使用 react-router ？（我正在使用 immutable.js，如果可能的话，我想实现热重载 =）

非常感谢！

我在将路由器连接到 rootReducer 时遇到问题，控制台日志

未捕获的类型错误：无法读取 createRouterReducer (reducer.js?005c:9) 处未定义的属性“位置”...

不知道如何修复它并将路由器连接到减速器。

减速器/rootReducer.js

预计将路由器连接到rootReducer，但发生错误

我正在尝试使用connected-react-router模块。

从文档中，这是我在减速器中的代码：

我在编译时收到此错误：

./node_modules/connected-react-router/esm/ConnectedRouter.js 模块未找到：无法解析 'C:\Users\ericn\Documents\ReactJS\test\node_modules\connected-react-router 中的 'react-redux' \esm'

我一直在寻找这个，但似乎没有一个有同样的问题。

有什么想法吗？