问题标签 [connected-react-router]

对于如何使用 connected-react-router 在单页 react-redux 应用程序上实现时间旅行的任何帮助或示例，我将不胜感激。

一旦我在第 3 步或第 4 步上并拥有该步骤的正确状态信息（不是当前状态），我只想能够对链接进行编程以返回到第 1 步或第 2 步。

我知道我应该将我的数据存储在历史/位置状态。但我不知道如何对链接进行编程以导航回第 1 步或第 2 步。

任何这样做的例子都会有所帮助。非常感谢！

Github上的相关帖子

目前，我很难在我的 react-redux 应用程序中正确使用这两个库。

我的代码如下所示：

index.js

应用程序.js

布局.js

导航.js

但是，当我运行应用程序时，它会显示You should not use <Route> outside a <Router>. 导航肯定在 中ConnectedRouter，而且看起来这个路由器与react-routerv4 配合得很好，所以我不知道如何处理这个问题。

有人可以给我一个建议吗？

我升级为使用 react-router v4 (rr-v4) 并读到 react-router-redux 已被弃用，并且 rr-v4 使用 connected-react-router。这样做我现在收到以下错误：

该道具location在 中标记为必填ConnectedRouter，但其值为undefined。

我似乎无法弄清楚我做错了什么。我有很多代码，所以我将尝试分享相关的内容：

我已经仔细检查了所有教程和常见问题解答，但我似乎无法弄清楚我的问题出在哪里。

完整示例：https ://stackblitz.com/edit/react-hmuwhx?embed=1&file=App.js

下面是一些感兴趣的代码。帮助表示赞赏！

我正在将我的应用程序迁移到 from react-router-redux -to -->connected-react-router但是，我遇到了一个问题。目前，我有某些受保护的路线（需要经过身份验证的用户），即仪表板

授权组件如下所示：

用户登录后，他被定向到/dashboard路径并token保存到 redux 存储中的 auth（持久存储到 localStorage）。

问题：

• 在第一次刷新页面时，console.log 语句（来自授权）输出，Auth: {token: null}用户重定向到 /login
• 在第 2 次刷新 console.log 语句（来自授权）时输出，Auth: {token: <userToken>}用户重定向到 /dashboard （正确的行为）
• 在第 3 次刷新 console.log 语句（来自授权）输出该内容Auth: {token: null}并将用户重定向到/login
• 在第 4 次刷新 console.log 语句（来自授权）时输出，Auth: {token: <userToken>}用户重定向到 /dashboard （正确的行为）

注意到一个模式了吗？似乎每隔一个Authorization页面刷新上的组件在 它有时间从本地存储恢复之前访问身份验证状态。

如果我恢复使用 ，则登录后每次刷新页面时都会react-router-redux将用户重定向到正确的位置。/dashboard

我希望我的传奇在成功验证后将登录用户重定向到主仪表板屏幕。我遵循以下文章中概述的代码：https ://github.com/supasate/connected-react-router和来自https://github.com/supasate/connected-react-router/tree/master/examples/的示例基本的。当从 saga 中调用 push 命令时，我可以看到 url 发生了变化，但是，页面没有重定向到仪表板屏幕。相反，用户只是停留在同一个屏幕上。我目前正在运行 react-redux v6、react v16.4.1、react-router: v4.3.1、react-router-redux v4.0.8。我可能做错了什么？

应用程序.js：

历史.js：

商店.js：

index.js

传奇代码：

我对由 react-router-dom 引起的问题感到困惑。它无法从 react-router 导入 matchPath 函数。例外是：

./node_modules/connected-react-router/esm/selectors.js 尝试导入错误：“matchPath”未从“react-router”导出。

以前也有人问过类似的问题，但这似乎是特定于connected-react-router. 我可以使用Routeror BrowserRouterfromreact-router(-dom)并且没有问题，但我想合并 Redux 因此使用这个包。

应用程序.js

相对简单，类似于NPM 页面上connected-react-router的示例。

即使我查看他们 GitHub 上的基本示例，也有类似的编码模式。

这些是我得到的错误：

第二个错误似乎来自我的高阶组件，所以这是代码：

PimberlyLogin.js

编辑

我玩了抓取<Switch>和<Route>从不同的包（react-router& react-router-dom）。目前我正在做：

...并且我得到：You should not use <Route> outside a <Router>.

如果我做：

我得到：You should not use <Switch> outside a <Router>.

这是否可能与<Route>fromreact-router播放方式有关connected-react-router？

版本：

• react-router@ v4.3.1
• react-router-dom@ v4.4.0-beta
• connected-react-router@v6.0.0
• react@ v16.5.2

有一个Login组件

在useEffect钩子中使用了pushfrom connected-react-router。钩子触发正常，但之后没有任何反应。

同样的方式，push是用在login行动中的。

在这里，一切都成功并dispatch发生了，再也没有push发生过。

有什么问题？

单击后退按钮时，url 会发生变化，但是应该为这个 url 渲染的组件不会被渲染。重新渲染似乎被阻止了。我正在使用连接的反应路由器。在实现 connected-react-router 之前，后退按钮工作正常。我尝试了一个建议的解决方案，用 withRouter 将我的连接函数与 redux 商店包装在一起，但仍然看不到任何结果。

index.js

应用程序.js

导航.js

仪表板.js

BookListContainer.js

CreateEditBookContainer.js

单击 EditBook 按钮时，CreateEditBookContainer.js 会正确呈现，但是当单击后退按钮时，此组件仍然存在，而 Dashboard 组件实际上应该被呈现，因为它对应于在 url 中正确设置的路径“/” . 单击 Navigation 中指定的 Route 链接时，所有组件都会正确呈现。它只在后退按钮上失败。感谢您的任何建议。