当用户登录时，我想显示用户名并将按钮文本从导航栏（导航组件）中的“登录”更改为“注销”。我厌倦了通过将路由器历史位置推送到用户登录的主页来重新渲染导航组件在。

然后用户可以成功登录，用户数据保存在localStorage中，路由器位置发生变化。数据保存在 localStorage 中，但组件不会重新渲染。

这是我尝试过的。

1. 试图将“connected-react-router”降级为“v6.0.0”，但它给我带来了一些错误。所以把它放回最新版本'^6.4.0'。

2. 尝试在作为父组件的 App.js 中添加导航栏代码。但是 app.js 本身也不会在用户登录时重新渲染。

应用程序.js

导航.js

localStorage.js

index.js

路由.js

我希望在路由器位置更改时重新渲染 Nav 组件。

我有一个带有 React-Router 的 React-Redux 应用程序，并且connected-react-router（能够在 redux 操作中更改位置）：

要更改 redux 操作中的位置，我这样做：

这很好用，但我遇到了我不理解的行为：

当我通过 redux 操作触发位置时，一切正常。但是，当我使用 url 重新加载页面（= 浏览器刷新）时，将调度/projects一个@@router/LOCATION_CHANGE动作。/

而且这种位置变化只发生在production模式中。在development模式 (with react-hot-loader) 中，url 被正确加载。

如果我在和模式下都替换ConnectedRouter为一切都很好。BrowserRouterreact-router-domproductiondevelopment

在路由的初始渲染中，历史对象看起来像这样（如预期的那样）：

但不知何故，ConnectedRouter它做了一个重定向。

欢迎任何帮助！

编辑：这是路线代码：

如果我们想在 redux 中以编程方式更改路由，我们曾经使用react-router-reduxnpm 包。然而，它是由其作者存档的。现在推荐的解决方案是connected-react-router：

https://www.npmjs.com/package/connected-react-router

但是正如文档在这个包中所说的那样，应该使用它来代替react-router它来使其工作。

通常我使用的是react-router-dom：

但正如文档所说，我必须react-router v4/v5用ConnectedRouterfrom package 替换：

但是这种情况会导致Linkfrom出现问题react-router-dom。Link必须放在里面BrowserRouter，但我不能使用它，因为没有BrowserRouter，因为文档在说 - “记住删除 BrowserRouter 或 NativeRouter 的任何使用，因为留下它会导致同步状态的问题。”

问题是它ConnectedRouter是react-router, not的连接版本react-router-dom，所以里面没有类似LinkorNavLink的东西。

一定有办法，如果不是我相信这个包在github上不会有3k星......

问：Link在里面怎么用ConnectedRouter？谢谢！

react我使用, react-router,创建了一个应用程序react-redux，connected-react-router并且具有以下结构：

我的想法是执行以下应用程序流程：

但由于某种原因，我看不到CategoryAdd渲染的最后一个组件（）。

代码（沙盒链接在最后）：

index.js

管理页面.js

类别.js

类别列表.js

CategoryAdd.js

这是沙箱：https ://codesandbox.io/embed/dark-star-3fhs0

在查看了各种将 redux 与 react-router 结合起来的包之后，看起来 connected-react-router 是最受欢迎的积极支持的选择。

我几乎按照文档中的方式对其进行了配置，但有一个例外情况如下所述。

我遇到的问题是 react-router<Redirect>会重定向，但不会更新state.router.location. Codesandbox MNWE 在这里。[编辑：我在发布后意识到<Link>有完全相同的问题，并通过对原始代码框的轻微修改来说明它。抱歉，如果我刚从那里开始会更清楚，但我需要睡觉！]

在以下示例中，有 3 条路线。第一个匹配根“/”。第二个匹配简单的 URL，如“/anything”，默认匹配“/anything/else”等内容。<Where>是一个小组件，它显示它的textprop 然后显示state.router.location.pathname.

当您到达时，您应该看到“Root: /”。如果您在地址栏中添加“/anything”，您会看到“Exact: /anything”。如果您在地址栏中输入“/anything/else”，地址栏将重定向回根目录，<Switch>然后返回以匹配根目录，但您看到的不是“根：/”，而是“根：/任何东西” /别的”。记录器确认虽然手动输入的 URL 会触发state更新，<Redirect>但不会。

也许我认为它应该是错误的，但我没有看到它以一种或另一种方式记录。我想我犯了一些配置错误？

[我描述的配置异常是我没有combineReducers在我的应用程序中使用，我有一个我调用的减速器appRootReducer（在这个例子中是空的）。所以我写了一个小createRootReducer包装。它运行良好，可以完成基本更新state.router。]

我希望你能帮忙！

我正在将我的 root reducer 从 javascript 转换为 typescript，但是，我收到一个 linting 错误说：

缺少函数的返回类型。(@typescript-eslint/explicit-function-return-type)

我的根 reducer 函数的正确返回类型应该是什么？谢谢。

我实现了 redux-persist 到 connected-react-router。起初，一切似乎都奏效了。Redux 存储连接到本地存储并保持状态。但是我意识到，当我从电子邮件中打开链接（http://localhost:9080/reset?token=###）以重置密码时，网站只是停留在当前位置。当我尝试手动更改 url 时，它不起作用。

链接有效。当我在其他浏览器中打开链接时，它可以工作。Url 将在没有 redux-persist 设置的情况下手动更改。

store.js

index.js

我已经尝试过。

我已经尝试添加如下所示的“connectRouter”。它似乎没有改变任何东西。我应该在商店中设置“connectRouter”吗？

当我使用'rootReducer'而不是'rootReducer（history）'时，历史将与'connectRouter（history）（persistedReducer）'重复。它将中断并显示错误消息：无法读取未定义的属性“位置”。

谢谢 ！！

我正在尝试根据反应样板 4 将 redux-persist 添加到我的 Web 应用程序中。我已按照文档进行操作，但收到错误无法在状态树中找到路由器减速器，它必须安装在“路由器”下。

实施的更改：

在 configureStore.js

reducers.js 没有变化

在 app.js 中：

我得到的完整错误是：

未捕获在状态树中找不到路由器减速器，它必须安装在“路由器”下

react-dom.development.js?61bb:17117 组件出现上述错误： in ConnectedRouter (created by Context.Consumer) in ConnectedRouterWithContext (created by ConnectFunction) in ConnectFunction in IntlProvider (created by LanguageProvider) in LanguageProvider (created by ConnectFunction ) 在 Provider 的 PersistGate 中的 ConnectFunction

考虑向树中添加错误边界以自​​定义错误处理行为。访问 fb.me/react-error-boundaries 以了解有关错误边界的更多信息。```

当用户身份验证超时时，我正在使用 connected-react-router 历史记录导航到登录屏幕。为此，我使用 axios 拦截器来捕获所有响应并检查它们是否返回指示上述情况的错误消息。我这样做如下所示：

路由工作得很好，但是反应仍然尝试渲染我导航离开的组件。由于后端以错误响应，组件接收的数据为空，这导致应用程序抛出类型错误并崩溃。

由于在身份验证超时后应用程序中的任何 api 调用都可能发生这种情况，有没有办法可以抑制此渲染？或重置应用程序？我是否必须尝试将所有 api 调用包装起来？

我正在尝试升级我现有的代码库并从 react-router-redux 移动到连接的 react-router。找不到太多关于迁移的资源，但这对我有很大帮助。

我无法找到任何有关如何在 react 组件中使用 connected-react-router 访问路由器对象的资源。使用 react-router-redux 我在上下文中得到了它。