问题标签 [react-routing]

我在 ReactJS 中有一个项目，因为我有 3 种不同的视图来显示数据。为此，我有 3 个不同的组件。

我有一个父组件，其中有一个名为 Rotate 的按钮和三个选项，两个更改视图。

我的要求是我需要根据视图类型设置旋转按钮的可见性，例如 ViewType1 旋转按钮应该是可见的，而对于其他类型的视图，旋转按钮应该是隐藏的。

下面是我的代码：

父组件

那么，如何根据视图类型调用 setRotateButtonVisibility() 函数呢？

或者

如何根据视图类型设置状态？

我已经尝试过子组件的 callBackFunc 但它不允许更改状态。

我也尝试过以下代码：

但没有任何工作正常。

这是我的代码

index.js

主.js

选择列表.js

欢迎.js

登录表单.js

这里既没有Welcome.js也没有LoginForm.js得到渲染。我不知道我的代码有什么问题。根据selection.js任一组件的渲染功能LoginForm.js或Welcome.js 必须渲染。在这里，我也在Main.js. 如果我将替换为componenetDidMuntincomponentWillMount那么SelectList.js它也不起作用。另请参阅我电脑上行为的屏幕截图。

这可能很复杂，所以请耐心等待。我刚刚开始学习 React/Redux 和管理状态。我想构建一个不使用路由的小应用程序，如下所示：

与安装向导不同。

将提示用户在每一页上回答一个问题，然后按一个按钮向前或向后前进。最后，用户将看到他们的答案列表。

我想状态会是这样的：

前进/后退应该增加/减少currentStepNumber，而currentStepData应该显示，比如说steps[0]。此外，应在导航时保存响应。最后，所有结果都应该在最终的“页面”上可见。

我真的很想知道如何通过简单地在组件和容器之间传递道具来做到这一点而无需路由。

上面的状态对象是一种尝试，看起来它可能有效，但我觉得我没有得到它。

具体问题：

• 如何在没有路线的“导航”时显示/隐藏组件？
• 是否应该一直隐藏结果容器，直到到达最后一步？
• 如何设计状态，以便我知道步骤 N 是向导中的最后一步，因此需要显示结果容器？

我正在尝试在基本反应应用程序中实现反应路由。

我已经实现了它，但不知何故它不能正常工作。

URL 已更改，但组件中的内容未加载。

这是代码路径：https ://github.com/AshuDeshpande/ReactSampleApplication

当我将代码链接放入 Mobx 商店 ( const len) 时，我立即收到 React 路由错误。例如：

如果我删除它（store.goods.lenght），它可以工作，如果它在那里，我无法到达任何路线。它向我暴露了以下错误：

<Provider/>这里取自 mobx。

更新

@withRouter在声明之前添加装饰器后App class，控制台中的错误消失了。但这并没有解决问题，因为现在它只是无法显示路线，例如：

有没有人遇到过这样的案例？

我试图让我的图像出现在我的反应代码的构建版本中。

当我处于构建版本时，此代码有效。我的报告管理器图标出现了，但是当我导航到 www.mywebsite.com/reports/user 时——图标消失了 import reportIcon from "/src/img/reportmanager.svg";

也不起作用。这是我的 webpack.config.js 文件

有什么方法可以从反应应用程序中的 url 中删除查询字符串？

this.history.push('component/:id')

我希望在导航时从浏览器 url 中删除 id。

如果用户未登录，我试图重定向到登录页面。当我在 App.js 中使用路由时它工作正常，但在为路由制作单独的文件后我没有。

路由.js

应用程序.js

我之前的溃败条件是

所以我希望这些路线能够正常工作。

我一直在使用如下代码在我的 React 应用程序（使用 react-router-dom 4.3.1）中构建链接：

因为这似乎是推荐的做法（例如参见${match.url}/components https://reacttraining.com/react-router/web/guides/quick-start/example-nested-routing）。

我遇到的问题：

如果我在以下路径：

以上生成的链接如预期：

• /app/home/1/信息
• /app/home/2/信息
• /app/home/3/信息
• 等等

但是，如果我加载这个（略有不同的）路径（注意尾随 /）：

然后生成的链接是错误的（注意双 / 后 home）：

• /app/home//1/信息
• /app/home//2/信息
• /app/home//3/信息
• 等等

换句话说，问题是有时有尾随 / 有时没有。

当我建立一个链接时，我是否需要每次手动检查尾随 / 并在它存在时将其剥离？还是我可能缺少一些更好的最佳实践？

我有一个 App 组件，它有子组件 NavigationBar。NavigationBar 也有子项，即 NavigationBarTabs。我想做的是在 App 组件中管理路由，但在 NavigationBarTabs 中有链接。如果我这样做，我只能通过刷新来获取App中的新内容。如果我在 App 组件中保留链接，它可以正常工作，但显然我希望这些链接位于 NavigationBarTabs 中。有什么办法可以做到吗？下面的例子：
点击链接后工作：

单击链接并刷新页面后工作：