问题标签 [react-router-v4]

我有一个服务器为多个 URL 呈现相同的单页应用程序：

我希望 A 充当“主页”页面。因此，对“/”或“/A”的浏览器请求应该显示相同的内容。

特别是，我将有指向页面 A 和 B 的链接，并且我希望将指向 A 的链接标记为“/”和“/A”的活动。

所以我正在使用类似的东西：

我如何将“/”作为“/A”的同义词？我尝试了什么：

• 添加另一个Routewith path="/"：这会导致显示两个组件
• 使用像这样的正则表达式path="/(A)?"：这将显示正确的组件，但链接未标记为活动

我是否应该将其实现为服务器端重定向（只是/重定向到/A而不是提供相同的页面内容？）

在我的登录屏幕上，我为登录或注册按钮呈现引导模式。在这个里面Modal我有一个像这样的 onSubmit 表单

我/about的他在我的内部定义Router：

但是单击提交按钮时，我的登录页面会使用此 URL 刷新：localhost:3000/?

我用的是react-router4。

编辑：添加表格

[...]

[...]

编辑2：

我在我的 React 应用程序中使用 react-router v.4 并且遇到了这个问题：当我点击<Link>组件时，URL 正在改变，但数据没有呈现。这是我的代码片段：

Header.component.js：

app.js：（收集所有组件并具有路由逻辑）

临时，我已经通过点击处理完成了它（防止默认行为和 window.location.reload('some/path')），但这不是 React 方式。我会很感激任何建议。

这是我的用例：

在 WelcomeScreen 我有这样的代码：

当用户访问时/welcome，他可以点击购买按钮，该按钮将发送一个动作并将其设置checkoutState.status为TRYING_TO_BUY。将Welcome通过调用重新呈现renderPurchaseForm

在 内renderPurchaseForm，它将呈现一个ArticlePurchaseBlock

在块中，该类将尝试更新 url 以反映它在输入表单中

你可以看到history.push(URL_BUY_ARTICLE);被调用componentWillMount。

现在的问题是：当用户在购买表单中，如果用户想回到之前的 url ( /welcome) ，他不能。这是因为 的 状态checkoutState.status是 静止的TRYING_TO_BUY。欢迎总是呈现给表单。

我可以在哪里ArticlePurchaseBlock监视返回事件并取消设置状态？redux-saga-router由于时间限制，我不打算使用。

我正在使用react-routerv4

我尝试从https://github.com/ReactTraining/react-router/blob/master/packages/react-router-config/README.md#renderroutesroutes运行示例

服务器端代码：

（路线 - 只是从示例页面复制过去）在某些路线上请求后，我总是得到主页

如果我使用自己的路线

在两条路线上，我还获得了主页，单击 Link don't work 并且不记录任何错误

我的仓库：https ://github.com/kirsanv43/react-universal-starter-kit/blob/master/src/server.js

大约一个月前我提出了一个类似的问题，这似乎解决了我在这里的所有问题，但是我猜 react-router 版本发生了变化，现在这一切都变成了垃圾？因为现在这些都不起作用，根据我的研究，代码有一些相当大的变化。

我只想为一个简单的 webapp 做一些简单的路由，使用我之前线程中的相同示例，我目前有这个：

不幸的是，即使这样，我仍然无法在不同的组件之间导航并不断收到消息

无法获取 /page1

我还注意到 this.props.children 似乎不再使用了，或者至少它不像以前那样工作了。

无论如何，我想要的只是能够在页面之间导航并适当地路由它们。我在这里做错了什么？

编辑：我还应该提到我已经阅读了 React Router 的文档并尝试按照这里看到的方法进行操作，不幸的是这些路由仍然不起作用。

我正在尝试使用 react-router 4 进行服务器端渲染。我正在遵循此处提供的示例https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together

根据服务器上的示例，我们应该使用StaticRouter. 当我按照示例导入时，我看到 StaticRouter 未定义

在网上做了一些研究后，我发现我可以使用react-router-dom. 现在我的导入语句看起来像这样。

但是，当我运行代码时，我正在Invariant Violation: Browser history needs a DOM浏览器中。

我的 server.js 文件代码

还有我的 client/index.js 代码

更新 v1 将我的示例减少到最低限度，但仍然出现相同的错误。

客户端索引.js

服务器索引.js

应用程序.js

我正在尝试迁移到 react-router v4。我终于让路由本身手动工作（当我输入特定的 url 时），但现在我无法通过导航栏链接页面。

以前我会简单地在 NavItem 周围使用 LinkContainer，但是当我现在这样做时，我得到了错误：

Uncaught TypeError: router.createHref is not a function at LinkContainer.render (LinkContainer.js:112) at ReactCompositeComponent.js:796 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) at ReactCompositeComponentWrapper. _renderValidatedComponent (ReactCompositeComponent.js:822) 在 ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 在 ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 在 Object.mountComponent (ReactReconciler.js:46) 在 ReactDOMComponent.mountChildren (ReactMultiChild.js: 238) 在 ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

我在谷歌搜索时没有发现任何东西。

这是我当前的代码：

有想法该怎么解决这个吗？

无论我做什么，当路径为“/”时它都会起作用，但没有别的。

当我创建路径“/”时，任何一个都可以工作，但我无法获得任何其他工作路线，并且我收到消息“无法获取 /test”。我认为该错误可能与我的服务器或 webpack 有关，因为我可以在使用 Create-react-app 时使路由正常工作，但我很无能。

我怀疑我的服务器端代码可能做错了什么

我的目录结构是

我真的很感激任何帮助。

对于将来遇到此问题的任何人，我都可以通过将以下代码添加到我的服务器文件中来解决这个问题。

看这个视频，反应路由器似乎很容易使用，但我找不到如何在我的代码中导航，因为我想链接点击一个 div 而不是使用<Link>.

我搜索了 StackOverflow，但没有找到任何适用于 4.0 的答案。尝试从这个问题中导入 browserHistory 会给出未定义（在安装 'react-router' 和 'react-router-dom' 之前和之后） ：

我还在某处看到了可以访问的“上下文”，但这显示了“匹配”而不是“上下文”的值：

编辑

在开发工具中，我可以看到“路由器”有一个历史属性，所以当我添加它时，我可以得到它：

有没有办法从路线外部到达这里？例如，导航栏组件将导航到其他组件，但不在 Route 本身内......