问题标签 [react-router-component]

这是我的文件结构

在我的 App.js 文件中，我使用 Axios 从 Api 获取数据，然后返回“CharacterList”组件，并将从获取结果中获取的属性传递给它。

在我的 CharacterList 组件中，我通过 props 从 App.js 接收数据并映射到它以填充我得到的结果列表。它工作正常并且显示准确。

在我的 Tabnav 组件中，我导入了 Route 并像这样将 CharacterList 组件传递给 Route时，每当我单击链接时都会<Route path="/characters" component={CharacterList} />收到一个。TypeError: Cannot read property 'map' of undefined

没有 Route 我的数据显示正常，但使用 Route 它返回“地图”错误。请问这里发生了什么，我该如何解决这个问题？

谢谢！

预期：在每一页上，我都有一个搜索表单。提交时，它将显示获取的数据。

发生：当我提交表单时，我收到 TypeError: dataItems is undefined

这是我的应用程序组件

这是我的表格AnimeSearchForm

我的组件要渲染AnimeCard

我尝试使用来自 React Router 的历史 API 并渲染了我的组件，但它会与我在给定时间使用的任何组件一起渲染。即我会在主页上搜索，搜索结果会出现在主页上，其中包含所有主页内容。所以我尝试使用重定向并最终解决了这个问题。

我提到这篇文章让我滚动，但无济于事。

考虑以下：

有什么可以阻止一个人这样做吗？

有什么缺点吗？

我创建了一个简单的预订应用程序，其中包含 3 个文件、App.js（Booked.js第一个孩子）和Details.js（第二个孩子）
我正在尝试App.js使用第二个孩子（）访问以删除数据，Detail.js但我无法继续，因为它会抛出一个错误

“TypeError：无法读取未定义的属性‘状态’”

每当我尝试向路由组件添加功能以访问App.js

这是主页 https://i.stack.imgur.com/4PrM8.png
当我单击 Booked.js 中的数据时，我被重定向到 Details.js 以查看特定数据https://i.stack .imgur.com/H2EnL.png

使用此代码，带有组件的 Route 可以工作

但是添加一个函数后给我一个错误

或者

Booking.js 中的链接

在引发错误的 Details.js 中。

有人可以帮助解释为什么会这样吗？任何解决方案或替代方案？蒂亚！

我有一个带有页眉、页脚和侧边栏的页面。App.js 文件如下 -

SideBar.js 文件如下 -

当我单击两个链接中的任何一个时，它们会加载到侧边栏中。我想将它加载到 ID = mainBody 的 div 中。我该怎么做呢？我哪里错了？

我是 ReactJS 的新手，并且使用过 create-react-app。

最初这是App.js中路由的样子：

应用程序.js

DefaultLayout.js

所以基本上，/home路由指向DefaultLayout组件，该组件包含应用程序的所有嵌套路由。这完美地工作。
因为只有经过身份验证的用户才能访问主页，所以我实现了一个PrivateRoute 组件：

PrivateRoute.js

应用程序.js

现在，登录后我得到一个空白屏幕。（尽管我确实被重定向到/home/dashboard）。因此， DefaultLayout组件的内部路由不再正常工作。
备注：我发现DefaultLayout组件中的嵌套路由必须在App.js中定义才能正常工作。例如：

DefaultLayout.js

应用程序.js

但是，我不能对所有路线都这样做。奇怪的是，在使用 PrivateRoute 之前，嵌套路由可以完美运行。而且我不明白为什么PrivateRoute组件使DashboardLayout内的嵌套路由无法正常运行？

我正在按照本教程来实现嵌套路由。
以下是相关代码：

应用程序.js

DefaultLayout.js

PrivateRoute.js

正如您可能已经猜到的那样，我正在使用PrivateRoute组件保护/home路由。 / home路由与DefaultLayout组件相关联。DefaultLayout组件包含一个NestedRoute ，它是/home/users，它通向组件Users。

私有路由正常运行，并在用户登录到默认布局后路由用户： 但是，当我单击将我路由到/home/users的按钮时，我得到这个空白屏幕： 知道我做错了什么? 编辑 1：当我将此添加到 App.js 时：

我确实被路由到了用户组件。但是，不是作为嵌套路由，而是作为根路由中的一个组件。换句话说，Users组件不会出现在defaultLayout组件中，而是作为根组件出现。我希望这是有道理的。这是一个屏幕截图：

编辑 1 结论：嵌套路由实现不起作用。该应用程序仍然从App.js内部路由，而不是从DefaultLayout.js内部路由。
编辑 2：我意识到即使没有PrivateRoute组件并使用普通的Route组件，嵌套路由仍然不起作用：

我搜索了不同的教程和多个 stackOverflow 问题。这些都没有帮助我解决一个非常基本的问题：
使用 react-router-dom 实现嵌套路由
这是我的代码到目前为止：

应用程序.js

DefaultLayout.js

当我转到/home/users时，我得到一个空白屏幕，因为 react-router-dom 正在App.js中查找该路由的定义，而不是在DefaultLayout.js中搜索它。
所以我有两个问题
： 1：我到底做错了什么？
问题 2： react-router-dom 如何知道它应该在DefaultLayout.js而不是App.js中寻找嵌套路由？

已经两天了，我仍然无法解决这个简单的问题。
很感谢任何形式的帮助。
编辑1：我开始一个新项目只是为了实现一个非常简单的嵌套路由：

应用程序.js

父组件.js

嵌套组件One.js

嵌套组件二.js

但是，每当我尝试访问嵌套组件时，我仍然会得到一个空白屏幕......

经过几次尝试，我已经设法使用 React-router-dom 实现了基本的嵌套路由。
这是简单的项目结构：

以下是相关文件：

应用程序.js

导航栏.js

父组件.js

嵌套组件One.js

嵌套组件二.js

所以结果如下： 如果我点击nestedComponentOne：

如果我点击nestedComponentTwo：

问题是当我在第一次单击它后再次单击nestedComponentOne （或两个）时，路由被添加到url 字符串而不是替换它：

我有一个导航，我很难尝试设置样式。我已经能够将活动类添加到导航元素并将样式应用到它们，但是当我单击它时，用作主页的主仪表板没有应用专用的活动类。在应用程序中进行了一些挖掘之后，我相信 AppRouter.js 或 routeConfig.js 可能是问题所在。

导航元素与下面的 Navlink 代码一起显示：

应用路由器如下所示：

看起来“仪表板”页面有一个特定的规则。如果他们单击徽标，这也是人们访问的页面，所以我觉得有一个特定的规则阻止仪表板页面继承“is-active”类。我是 React 的新手，所以目前这有点超出我的想象，任何帮助都将不胜感激！

编辑：这里是 rednerNavigation 被调用的地方：