问题标签 [react-router]

我正在尝试让 react-router 与 webpack-dev-server 一起使用，但一直无法获取 /SOMEURL。这是因为 webpack-dev-server 正在寻找该特定文件但找不到它。我希望 webpack 诉诸于使用 react-router 与搜索文件本身。

我该如何设置？

我的咕噜声：

在过去的几周里，我一直在使用 React Router 并取得了巨大的成功，但我遇到了一个我似乎无法找到解决方案的问题。每当将任意查询参数附加到 url 时（在我们的例子中，为了通过电子邮件跟踪 URL），您登陆的页面将加载，然后自动刷新而不会发出警告。

鉴于最基本的路线设置：

和一个默认处理程序：

如果我导航到http://whatever.com/results一切正常，但如果我导航到http://whatever.com/results?ref=track页面将刷新并重定向回http://whatever.com/results#/. 请注意，在散列和斜杠之后附加 queryParams会导致正确的行为；问题是，许多这些链接是在服务器端生成的，并且不希望以这种方式强制散列。

我是否需要为 queryParams 设置通配符处理程序？任何指向文档的指针也会有所帮助。

编辑：
虽然这不能解决导致意外刷新的总体问题/错误，但我发现使用 Router.HistoryLocation PushState 选项加载路由允许 queryParams 预渲染：

谢谢！

我已经开始使用 Flux 和 react-router 开发应用程序。我的一个组件使用从 Flux 商店获得的状态进行填充。这工作正常。但是，当我使用 react-router 离开这个组件然后再次返回时，我得到了上述错误。如果我刷新页面，错误就会消失，页面工作正常。

根据我对此的理解，react-router 似乎没有重新安装此组件，因此它试图更改未安装组件的状态，因此出现错误。

如果这是正确的，我如何让 react-router 重新安装组件？

PS。此代码太长，无法在此处发布。它已发布在 Github 上，但由于问题已经解决，现在该帖子已被删除。更新（感谢肖恩）：

该应用程序可以使用 dist 文件夹运行，只需将此文件夹复制到网络服务器并将浏览器指向该文件夹（我在本地使用 xampp）。问题出在周页面上（组件 TableWeekly 运行此表）。使用下拉菜单更改讲师的视图会出现问题。首次加载或刷新后工作正常，但当您导航到另一个页面并再次返回时失败。

我正在尝试渲染一个名为 Navbar 的简单嵌套 React 组件，但是当我在其中使用另一个组件（或在本例中为 Link 标签）时，控制台给了我“未捕获的错误：找不到模块“../Navbar””。如果我删除 Link 标签，则会显示 h1 标签并且没有错误。我可以在 App 组件中使用 Link 标签，所以我知道它应该在项目中工作。

我的 App.js 代码如下所示：

我的 Navbar.js 代码如下所示：

我正在使用 React-Router、Webpack 和 Browser-Sync，但除了嵌套组件之外，路由、构建和同步似乎工作正常。

我正在尝试通过触摸触发课程。使用 onClick 它可以在桌面上正常工作，但使用 onTap / onTouchStart / onTouchEnd 事件不会被触发。我React.initializeTouchEvents(true)在渲染组件之前运行。clickhandler 在一个div元素上，我已经设置了cursor: pointer. 我正在使用 lonovo yoga 2 pro 和 iPad 进行测试。另外我使用react router。任何人都知道为什么它不起作用？

在里面：

零件：

在我的应用程序中，我使用 React.js 作为我的 javascript 框架，并结合 react-router 进行导航。

我在替换主容器 div 的内容时遇到问题。当我访问一些新路由时，会调用 render 方法激活相应的路由处理程序，但该 html 会附加到主容器 div 的现有内容中，我需要替换它。

Page2Handler 仅将其 html 附加到 App 处理程序在初始页面加载时呈现的现有 html。

我在这里做错了什么？

路由器.jsx：

客户端.jsx：

索引.html：

Page2Handler：

应用程序.jsx：

我很新反应。我尝试使用反应路由器。但无论我如何更改代码，它总是给我警告。

警告：没有路由匹配路径“/”。确保您的路线中有某个地方

谷歌搜索了几个小时后，仍然不知道出了什么问题。谁能给我一些提示？谢谢

在我的 app.js

在我的 route.js

我也使用 express 和 triing 做服务器端渲染，

我正在尝试 React 路由器。解释我的问题的简化示例（在帖子的底部）：

视图1

View2 的类似类

应用程序

路由器

我希望 AppHeader 在 App 类中（而不是在单个视图中），因为标题/工具栏始终可见。如果它是视图类的一部分，则每次路由器打开不同的视图时都会重新安装标头。但是，该组件的道具可能会根据活动的路线而有所不同。就像一个不同的标题，以及一个带有可点击操作的图标，导致视图中的某些内容（状态更改）。

我试图找到解决这个问题的好方法，这意味着 AppHeader 的不同道具基于哪个视图类是活动的路由处理程序。由于视图类是变化的组件，所以我考虑将它放在视图组件中（上例中的 View1/View2），即使该组件中不会使用道具。我已经将其作为这些组件中的静态变量，然后在 Router.run 中提取它们，问题是我无法在同一组件中调用事件处理程序（如 View1 示例中），例如标题的可点击链接在视图中做某事。

我试图有一个回流存储，并在视图组件的 componentWillUpdate 中，调用存储上的一些操作，在应用程序组件中监听并作为道具发送到标题。但是，对于第一次渲染，该操作在应用组件的渲染过程中被调用，导致第一个 header props 不可见，因为它们尚不可用。

我想到的另一种方法是每个视图（每个路由器处理程序）都有一个 Reflux 存储，并在各个存储中拥有标题的道具并将它们传递给 App 组件中的标题。但是我需要根据激活的路线在要使用的商店之间切换。除了使用 React Router 选择存储之外，我还没有找到任何方法让每个处理程序拥有单独的存储。

对于这种情况，还有什么其他选择？

我只是从 Reflux 和 React 开始。我看过几个 React/flux 教程/视频，但我还没有找到正确的方法来使用 Reflux/React 和 React Router 设置我的应用程序：

想象一下，我有以下网址：localhost:9000/projects/1/roles/2/action/3。根据 url，我应该能够追溯应用程序的状态。所以在我的 Route 处理程序中，我有以下设置：

应用程序.cjsx

在这种情况下，{Action} 是应该从商店接收数据的组件。这个 Action-component 监听 ActionStore 来接收数据：

根据几个教程，我应该在引导程序中启动我的商店，所以我在我的 App.cjsx 中添加了以下行：

actionstore 具有以下启动方法：

我的问题是应用程序中的流程不正确。现在的流程是：

1. 创建并启动 ActionStore
2. 存储从服务器启动和加载操作
3. 启动 Action 组件（添加监听器到 store）

所以actionstore已经接收到数据，之后组件被初始化，所以它永远不会从actionstore获得触发器。如何以正确的方式使用 React Router 和 Reflux 进行设置？

对于您想要使用 React 和 React Router 构建简单问卷的场景的任何快速简便的答案，您不希望用户能够修改 URL 以在任何地方浏览，而且您也不希望将历史状态推送到浏览器中，基本上阻止使用后退按钮？

示例路线可能如下所示：

但是 URL 应该始终保持不变，并且历史不会改变，本质上是没有路由的单页应用程序的行为。