问题标签 [react-router-redux]

当用户未使用 React 和 Redux 登录时，我正在努力弄清楚如何正确重定向到登录页面。

目前，在组件的构造函数中，我检查是否设置了用户名，如果没有，我使用提供的 routeActionsredux-simple-router重定向到登录页面。但是，我收到此错误：

我知道应该避免在渲染函数内部设置状态。但我不确定应该在哪里检测和重定向。我也尝试过检查 and 中的身份验证状态componentWillReceiveProps，ComponentWillMount但没有运气。

和

有没有一个好地方可以在尝试渲染组件之前检查状态和重定向？也许以某种方式使用容器对象，虽然我不太确定如何在我可以访问状态和调度的地方做到这一点。

我正在尝试修改 react-router-redux 的示例代码。 https://github.com/rackt/react-router-redux/blob/master/examples/basic/components/Home.js

这是我的 Home.js

我也有一个 mapDispatchToProps 。

当我调用 onSubmit 函数时，出现错误

如果我在 onSubmit 中删除 this.props，则 URL 中的密钥已更改，但仍位于同一页面上。从localhost:8080/#/?_k=iwio19到localhost:8080/#/?_k=ldn1ew

谁知道怎么修它？欣赏它。

我正在构建一个基于 reactjs、redux 和 react-router (redux-simple-router) 的网站，并且我有点纠结于如何根据用户是否经过身份验证来共享根路径。

我在看这个例子https://github.com/reactjs/react-router/tree/master/examples/auth-with-shared-root，但老实说我无法让它工作。

我有两种不同的布局。第一个是公共布局，当用户未通过身份验证时显示。从这里您可以访问登录页面和注册。

用户通过身份验证后，我想向他展示内部应用程序，这是一个完全不同的布局，但在同一个根 URL 中进行。

例如： http ://example.com/

当用户未通过身份验证时：

并且在认证之后，保持相同的根 URL。

就像 Facebook 一样。

我的问题是（如果你能提供一个例子那就太好了）：如何根据身份验证状态在同一个 URL 下呈现不同的布局？

PD：我有一个 Token 类，我在其中存储身份验证状态 (JWT)，并带有一个方法 hasToken。

在我使用 JSX 语法的示例中，我不知道是否必须切换到配置语法才能获得所需的结果。

任何帮助表示赞赏。

我正在尝试通过onEnter钩子使用 react-router（使用 v2.x）实现身份验证/授权策略。（也使用 redux 和 react-router-redux）

我想我大部分时间都在那里，但有一种情况是我位于不受保护或授权的位置，我尝试过渡到我想“留在原地”的受保护和未经授权的位置，但是当我onEnter上钩时，nextState参数已经在未经授权的位置，我想要replace原来的起始位置。

我目前正在修改将我自己的位置历史记录保存在 redux 状态，以便能够获得可用的起始位置，但似乎应该有一种更简单的方法来实现预期的效果。

任何建议/指导表示赞赏！

使用 react-router-redux，似乎获取路由信息的唯一方法是仅通过 props。这是正确的吗？

这大致是我现在在我的应用程序中所做的事情：

应用程序

主要的

消息列表

我想做的是从我的所有组件中删除 {...props} ，并将 MessageList 变成这样：

对于 Redux 让我的应用程序变得多么干净，必须在所有东西中传递 props 感觉就像是一个很大的倒退。所以如果传递参数是正确的，我想知道为什么那更可取？

我提出这个问题的具体案例：

我有一个发送消息的 UserInput 组件（发送 SEND_MESSAGE 操作）。根据当前页面（聊天室、消息提要、单个消息等），reducer 应将其放在正确的位置。但是，使用 react-redux-router，reducer 不知道路由，所以它不知道将消息发送到哪里。

为了解决这个问题，我需要传递道具，将 id 附加到我的 SEND_MESSAGE 操作中，现在原本简单的 UserInput 正在处理我的应用程序的业务逻辑。

我一直在使用react-router-redux，它允许我的位置很好地存储在状态中，并允许我使用 react-router 来定义路由和路由之间的链接。

一个问题似乎是，当我需要使用<Link />这样的组件进行导航时：

这将触发路由的更改，并在加载新路由时，在这种情况下是<Movie />路由，加载电影页面的状态。

这对于页面之间的转换并不能很好地工作，因为新页面在导航时将是空白的，或者您可以放入一个加载器，但实际上它不应该导航到新页面，直到新页面的 api 调用已经加载。类似于pitchfork.com或theguardian.com等网站

这个实现已经在这个问题中讨论过，并且在真实世界示例和reddit api 示例中使用了在页面转换之间仅使用加载器的方法

我的问题是，如果我想在导航之前在我的站点中加载新容器/路由的状态，我是否需要遵循 dax chen 在这个问题中建议的方法？

总而言之，答案是触发一个动作并使用 redux-thunk 我们可以通过调用新容器/路由的动作来预加载状态，然后在完成时我们使用 react-router-redux 的push()动作导航到页面

如果这是在转换之前预加载页面的推荐方法，那么我将更改我的react-router-redux-example和我当前的站点以使用这种方法。

加载新路线数据然后导航的操作将如下所示：

它将需要一些逻辑来识别要调用的新容器的操作以及要导航到的新路径。fetchData()它可能会调用新页面的容器组件上的静态方法。

所以这会使<Link />组件有些复杂，我只是在寻找一些关于这是否是正确方法的建议，或者我可能错过了更简单更推荐的方法。

我对 React.js 很陌生，但我正在使用它构建一个单页应用程序。对于路由，我使用的是 react-router。

我想要组织我的页面的方式如下：我想要一个静态页眉和页脚（仅加载一次），然后页面的内容将根据路线而改变。这里没什么特别的，这基本上是我对SPA的理解。

这是使用路由引导我的应用程序的 main.js：

这是组件App，它基本上包含了单页的结构：

因此，当我访问应用程序时，会加载组件“App”，然后将组件“Home”注入到主要内容中，因为它被声明为 IndexRoute。

直到这里一切都很好，问题是每次我从一个路由切换到另一个路由时，组件“应用程序”都会被渲染（我知道是因为我在控制台中看到了“渲染应用程序”日志）。这是我不明白的，据我了解，路由之间的切换不应该触发“App”组件的渲染，而只能触发动态注入的组件。

我不希望每次切换路由时都呈现页眉和页脚，恕我直言，这是拥有单页应用程序的好处。也许我不太了解 react-router 的工作原理，有人可以帮我吗？或者，如果我做错了什么，请告诉我什么是实现我需要的正确方法。

如果您需要查看任何其他代码，请不要犹豫。谢谢

我正在使用react-router-redux，

假设我已经定义url为/go-here/${routeId}并且我有routeId，数据对象也为

使用调度，我正在路由到一个新页面，如下所示，

导航到新页面后，我想访问数据对象，我该怎么做？

我正在尝试让 react-router 和 redux 一起工作。当我的组件挂载时，我会进行一个 ajax 调用，直到这个调用完成，我想显示一个加载消息。一旦 ajax 调用成功返回，我将重新路由到正确的页面。但是，每当我以编程方式更改路由时，react-router 都不会更新显示的页面。此外，我不想使用浏览器的历史记录，而是使用内部历史记录（内存历史记录），并且找不到任何与 redux 一起使用的示例。

我有一个带有 onEnter 参数的路由，当他们点击“/project”时，它将用户重定向到默认（第一个）项目：

并重定向到默认项目：

我需要 Project 组件中的项目，以便列出它们。现在我根本无法访问项目，它只是没有附加到组件上。

API有点模糊：
replace(pathOrLoc)
与push相同，只是用新的历史条目替换当前历史条目。

push就像：

我假设处理 /users/12/ 的组件可以通过 this.state 或 this.props.route.state 获取“fromDashboard”？为什么它不适用于替换？