问题标签 [connected-react-router]

假设您收到一个链接，该链接将您带到来自单页应用程序的页面。您希望能够立即看到该页面（当然，如果您已登录）。

问题是没有从服务器获取数据，所以页面是空的。

哪种做法最适合获取能够正确查看该页面的所有必要数据？基本上，刷新页面时，您希望留在那个地方，而不是被重定向到“/”（例如）。

我考虑制作一个单独的组件来获取所有数据，并在全部完成后呈现页面。但是，它有一个缺点，即在应用程序的正常使用情况下重复获取数据。

在我的 react 项目中更新了大多数包之后，我无法弄清楚在使用 connected-react-router （从现在已弃用的 react-redux-router 更新）时使 redux-persist 工作的变化。

我试过在线查看指南，但似乎没有一个redux-persist与connected-react-router. 我将如何在这样connected-react-router的设置中使用新的？

包版本：

src/index.js：

src/store.js：

src/reducers/index.js：

我正在尝试使用 React 应用程序测试工作流程。当所有字段都填充有工作流步骤时，用户可以单击“下一步”按钮。此操作在 reducer 中注册状态并更改 URL 以进入下一个工作流程步骤。

根据 RTL 文档，我使用以下功能将我的组件包装在存储提供程序和连接的路由器中：

与文档中不同，我使用connected-react-router, not react-router-dom，但我看到有些人connected-react-router在网络上使用 RTL，所以我认为问题不是来自这里。

被测组件封装在一个withRouter函数中，我通过连接的 react 路由器函数刷新 URL push，通过 reduxconnect函数调度：

click一切都在生产中运行良好，但是当我在“下一步”按钮上触发事件时页面不会刷新。这是我的测试代码（为了让您更容易阅读，我已填写所有字段并启用“下一步”按钮）：

这里出了什么问题的任何线索？

在我的反应应用程序中，如果我发送类似的查询参数localhost:8000/?param1=value1，它会转换为localhost:8000/?param1=value1#/. 我是新手，不太确定它是如何工作的。正在使用 ConnectedRouter：

如何在不手动将数据从组件传递到函数的情况下执行类似于以下的操作？

这很重要的原因是因为重要变量存储在 React 的 URL 中（例如，分页页面、文档 ID、搜索输入）。当这些存储在 Redux 中时，访问它们非常容易，并且无需从组件中传递它们。但是对于 match.params 来说，这似乎必须通过可能的几个包装组件手动传递到一个动作中。

我有一个非常简单的项目，您可以在以下位置找到：

https://codesandbox.io/s/issue-looping-between-last-2-routes-xhxu1

存档：/src/store/middlewares.ts我有以下中间件：

正如你所看到的，@@router/LOCATION_CHANGE我每次发送两个动作，并在另一个中间件上捕获一条消息：messageMiddleware然后我console.log用它们做一个。这些操作在调用之前和之后调度：next(action)。

我面临的问题是 line: store.dispatch(sendMessage("BEFORE D-DAY"));。

启用该行后，您可以执行以下步骤来重现该问题：

1. 在根位置打开应用程序（又名Page 01：）
2. 点击链接：Page 02
3. 点击链接：Page 03
4. 单击返回按钮（您将被重定向到Page 02：）
5. 单击后退按钮（您将被重定向到：Page 03，而不是Page 01 #FAIL#）

请注意，后退按钮是下面的一个（不是浏览器的实际按钮）：

另一方面，如果我取消注释我引用为问题的行，则单击后退按钮时，行为如预期：-> Page 02 -> Page 01直截了当。

似乎这个中间件系统不喜欢在调用: 之前调度一个动作next(action)。

关于如何以一种好的方式解决这种情况并在调用之前和之后继续记录操作的任何想法next(action)？

要求：使用中间件。

谢谢！

由于许多其他人遇到了同样的问题，我正在努力与<Link>元素交互以更改路线并呈现新组件。我可以在我的 redux 商店中单击我的应用程序更改的链接和路径，但没有更新任何组件。我的根组件似乎没有响应shouldComponentUpdate，即使 props 正在更改并且完整设置类似于connected-react-router描述它需要的方式。

去测试

示例代码（git repo）是一个 MVP（最小可行产品）——它可以很容易地复制我看到的问题。

如果您更喜欢查看文件，我在下面包含了必要的文件

index.js

store.js

根.jsx

路线.jsx

路线.json

包.json

在我的 React 应用程序中，从 Home 导航到子页面然后点击后退按钮后，React<Router>在其内部状态中显示与其传递的道具不匹配的位置，并且地址栏中当前显示的 URL 显示history不正确<Route>

do的内容发生了<Route>变化；数据由位置更改 Redux 操作更新。显示<Route>显示新数据，但它是错误的<Route>。

该应用程序的基本结构是：

最初我们导航到根目录并<Route path="/>正确显示。我们点击一​​个链接，正确地把我们带到<Route path="/quality/:q" />. 从那里我们回击浏览器，URL 更改为/但<Route path="/quality:q" />仍显示，但它不应该再显示了。

Redux devtools 显示了这个渲染树，我包含了一些我们明确使用的关键组件。

当处于这种不正确的状态时，一切<ConnectedRouter>都是正确的。<ConnectedRouter>有一个单一的道具，history它具有正确的位置，即根。

紧接其<Router>下方的是不匹配的。它有一个可以的history道具，但它的location状态陈旧，显示旧网址。

当错误的位置数据被上下文传递给<Route>s 时，他们会从他们的locationprop 中检查匹配的<Router>陈旧状态的路径。结果，<Route>呈现错误。

我无法弄清楚我做了什么导致这种不匹配。这都是简单的路线，并<Link>为从主页到子页面和返回的所有链接使用组件。

有没有人以前见过这个和/或可以指出我如何解决这个问题的方向？

嗨，所以我的问题是我无法在/recommended/category/:categoryId之间重定向。网址已从/recommended/category/1更改为/recommended/category/2，但没有渲染 reactjs，我可以说没有任何变化。请帮帮我。

如果用户无权访问服务器端资源，我有一个 fetch Epic 可能会返回 401 或 403。如果是这种情况，我想在这个 Epic 期间重定向。

现在我正在这样做：

WhereperformFetch只是一个简单的函数，它执行 fetch 并返回一个 Promise。

我正在使用window.location.replace，到目前为止它工作正常，但有人告诉我它会搞砸 React。

我尝试使用connected-react-router并返回一个push动作，但它没有进行重定向。

我可以安全地继续这样做，还是有更好的方法？