问题标签 [react-routing]

我是 ReactJS 的新手，希望在我的代码中实现某种程度的模块化，以便能够从单个文件/JSON 数组轻松添加/实现新的（嵌套）路由。

我已经尝试实例化一个 JSON Array 对象，其中包含<Route>组件预期的强制参数，然后将这个导出的变量导入App.js以迭代它，以便动态生成路由 - 只需要很少的代码行 - 但我遇到了很多问题，即，使用嵌套路由和默认的包罗万象的行为。

请参阅以下屏幕截图，显示 /404 组件尽管位于有效且预定义的端点中，但仍在显示：

查看嵌套路由无法正常工作 - 应该显示All Resources而不是Resources：

我希望从const routes导出的对象中读取所有路由并正确路由 - 包括嵌套和 /404 包罗万象的页面。

正在为一家医院开展一个项目，在该项目中，患者的数据从他们的 api 中提取并作为卡片加载到页面上（将提供屏幕截图）。当你点击一张卡片时，病人的更多信息会以模态形式出现。这里的目标是让他们在有人根据 slug 搜索它时进行渲染。来自 api 的每个端点都有一个 slug：API 数据

例如，如果您访问 localhost:3000/WebersWarriors (localhost:3000/${shirt.slug})，它将呈现该特定模式，如果您单击卡片，它将在 URL 末尾附加“WebersWarriors”。任何帮助或建议将不胜感激，谢谢！ 布局

当卡片被点击时

动态显示的模态代码：

我对反应路由器很陌生。我创建了一个带有导航栏的页面，可以导航到两个页面中的任何一个。在其中一个页面中，我有一系列链接应该指向另一个组件。我的应用程序组件处理初始路由

然后主组件呈现我想要完全导航到另一个组件的链接列表。PS：这与嵌套路由无关

我的链接代码列表是

但后来我的路线将各个链接链接到我的 404（未找到页面）

当我尝试使用反应路由渲染下一页时，它会在上一页上渲染，我想要一个单独的页面在渲染后作为 HTML 中的标签，请帮助，下面是我的代码片段。

我有这堂课：

我对未读取道具的用户组件有疑问。在我尝试显示路线之前没有<Switch>这样的：

并且在单击组件正确加载并显示道具后，但在刷新网站后它显示错误 404。实施 Switch 后，它绝对坏了。没有显示（只有控制台日志错误）

@Edit 用户组件从 'react' 导入 React；

知道如何解决我的问题吗？

在 netlify 上部署我的 react 应用程序后，我遇到了路由问题。我按照建议使用此代码将 _redirects 文件插入到我的公用文件夹中/* /index.html 200。

然而，当我从高级路线（例如“/sceneries/beach”）刷新页面时，它总是将我推回到索引页面。在本地，它以前一直运行良好。你知道如何解决这个问题吗？我的路线目前看起来像这样：

在 index.js 中

在 App.js 中

提前非常感谢！我真的很感激一些帮助！

下面是我在 react 中的功能组件代码，我在其中根据 userLoggedIn 状态设置路由。

在我的组件的返回函数中，我将此路由包括为：

一切正常，我面临的唯一问题是当用户登录并导航到 url: 'localhost:3000/UserProfiles' 或'localhost:3000/EditProfile/' 通过直接输入浏览器。由于<Redirect to="/" />. 我不明白为什么重定向不适用于有效路径。

我正在尝试发布一个名为“React-Animated-FullScreen-SideNavBar”的 Npm 包，它具有开箱即用的 react-routing 功能。如果您查看演示，到目前为止，一切都已设置好并且运行良好。

演示链接：- https://aryan21710.github.io/reactFullScreenAnimatedSideNavbar-github.io/

一旦我通过执行 npm 链接在内部测试包，我就会不断收到以下错误“不变式失败：您不应该在路由器外部使用 NavLink”

为了克服这个问题，我将 Navlink 包装在 Router 标记内，并带有指向 createBrowserHistory() 的历史记录。尽管如此，当我单击侧导航栏中的任何链接时，路由停止工作，并且我不再被重定向到指向 url 的组件。

我将非常感谢这方面的帮助。

包 repo 的链接：- https://github.com/aryan21710/reactFullScreenAnimatedSideNavbar-github.io

从包中导出的 React 组件在 App.js 中调用如下。

负责制作提供 SideNavigation 功能以及反应路由的包的组件如下。

上面的代码片段是在 AppRoutes.js 中调用 App.js 时的工作代码，如下所示。

在 npm 链接之后调用包时出现错误。我调用包的方式是使用 create-react-app 和 index.js 调用 Approutes 创建一个虚拟的 react-app。Approutes 有 BrowserRouter 包装 App.js。App.js 就像一个标头或通用组件（App.js 在 switch 语句之外）。App.js 的调用方式如上所示。

请让我知道我在这里缺少什么？

我是 React 的新手，当我单击View按钮时，我很难弄清楚如何返回一个新页面（一个组件）。我有一个用户表，每行都有一个查看按钮。我只能在完全相同的页面中检索数据，但我想在另一个页面中检索我的视图详细信息，其 url 上有其 id，例如：http://user-details-1。有人可以帮我弄这个吗。谢谢！

这是我的视图代码/组件：

这是我的路线：

这是我在另一个组件（UserTable 组件）中的View按钮的代码：

我正在使用 React 路由器。我的 app.js 如下所示 -

在执行登录后的函数中，我想使用 history.push 重新路由到 /dashboard 页面，我的代码如下所示 -

但是，即使浏览器转到 uri，/dashboard 它也不会正确加载，而是加载 404 not found 。但是，当我刷新页面时，它会正确路由并加载仪表板。

我的路由有什么遗漏吗？

responseSuccessGoogle 在这里被调用 -