问题标签 [react-router-component]

我正在使用 react-router 将主页上的一组卡片定向到其他单独的页面。但是，当我单击一张卡片时，新页面会呈现在一组卡片下方，而我想要的是仅呈现新页面。我认为问题可能与我的 App.js 将主页放在其中有关，但我不知道我应该把它放在哪里，是否应该有一个单独的链接等等？我将不胜感激任何帮助！谢谢

这是 App.js 的代码

这是主容器：

这是路线容器：

我现在正在使用 React 路由器 v4，我想在一个单独的对象中有一个路由配置，所以我按照文档进行了类似的操作（参见下面的代码）

我想实现这个流程：当用户移动到客户模块时，例如“/customer”，应该呈现一个概览组件，之后，我移动路线“/customer/cards” ，只有卡片组件应该在那里（Overview 组件应该消失）。但我不知道我该怎么做。

我只找到了一种方法来实现它（只需为 Overview 和 Cards 添加单独的路由。例如 /customer/overview 和/customer/cards。

但我不想有这个解决方案，因为我想在用户来到“/customer”时准确地呈现概览。

有人可以帮我一些建议吗？我会很合适的。

这是最小工作方案的演示：问题的最小工作演示

我是 ReactJS 的新手，遇到了路由问题。这是我定义了 React 路由器的 App.js 文件。

当我启动服务器并在浏览器中呈现页面时，页面加载完美。

甚至导航栏中的链接也运行良好。单击导航栏中的链接会呈现相应的组件。

问题是，当我尝试使用完整路径名加载页面时，我无法呈现页面。喜欢：-
http://localhost:8080/about
http://localhost:8080/feedback

该页面仅针对 URL http://localhost:8080/呈现

从主页我可以导航到所有其他页面，但是当我在浏览器中输入 url http://localhost:8080/about并按 Enter 时，我收到这样的错误 -

About 组件类如下所示 -

直接请求时，如何让其他 url 在我的应用程序中工作？

我有两个标签：个人资料和朋友以及导航链接如下

其中 tab = [{ "name": "Profile", "url": 'timeline' }, { "name": "Friends", "url": 'friends' }]

在我的 render() 中，我将路由定义为

其中screenId是 Timeline/Friends 取决于单击哪个选项卡

并且路由功能是

So the problem is whenever any tab is being selected, the url changes but the Routing function is not triggered so as a result the route is not working. 基本上/dashboard/profile/之后的任何东西都不起作用。

我也在我的渲染（）中尝试了这个：

但是它也不起作用，问题仍然存在。任何帮助，将不胜感激。

我想使用 React Component 来获取 id 匹配，但是在转到 url 时会出错：http://localhost:8080/portfolio/1并且对于其他 url 运行良好。错误 ：

AppRouter.js

PortfolioItemPage.js

怎么做才能让我在访问http://localhost:8080/portfolio/1时不会出错？

我正在学习 React.js。我熟悉下面的代码

但是我得到了以下代码作为问题的解决方案。

我无法理解上面的代码。谁能帮我理解？

这是什么{...rest}？

我知道传播运算符。为什么我在这里({ component: Component, ...rest })和这里 传递它<Route {...rest}？它在这两个地方做什么？

为什么render()是这样的render={props => }？

谢谢大家。

我对 React 有点陌生。我有一种情况，我需要在某些组件中隐藏一些导航栏链接，而在其他组件中，我想显示它们。实际上一直在使用反应路由器 V4 和打字稿。

当涉及到注册和登录页面时，需要隐藏 page1 和 page2 链接。

假设我还有一个在应用程序启动时加载的入门页面，这里我也想隐藏链接。

显示其余组件中的链接。

帮助将不胜感激

路由器代码

导航栏组件

我有一个简单的收件箱页面，可以打开用户消息。问题是当用户从收件箱页面点击收件箱中的消息时......什么也没有发生。我理解为什么这是推送的情况，但对于替换它似乎是一个错误。

尝试这样：

我正在尝试显示两个不同的导航栏组件，一个作为主站点导航栏，一个用于仪表板导航栏。

我尝试创建两个可重用的组件，即：

<LayoutNav />和<DashboardNav />

这是他们的实现：

这是相同的，LayoutDashboardNav我只更改<Navbar />为<DashboardNav />以下是我的路线实现：

我希望看到<Navbar />或<DashboardNav />仅在那些是它们所用组件的子级的页面上看到。但一切都只显示<Navbar />。

这是我的要求。

当在浏览器上点击路由 /xyz（显示 xyz 组件）时，我需要导航到单独的路由 /abc（显示 abc 组件）。

我还需要在导航时将新的道具和上下文传递给目标组件。

我正在寻找类似的东西

**

**

如何在 Reactjs 中实现这一点？