问题标签 [react-router-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
62 浏览

reactjs - React Route 组件道具

有谁知道你为什么会以这种方式调用组件。() => <Component/>在路线内 输入图像描述

0 投票
1 回答
41 浏览

reactjs - 页面之间的 React Js 路由中的意外行为

在这里,我正在实现一个简单的路由程序来在 react js 中的页面之间进行路由。我在运行时遇到意外行为。

这是我的App.js代码

  • 当我首先运行代码时 Home.js 页面应该可见。它来了没有任何问题 主页

  • 这里的问题是当我再次单击主页按钮时,它仅显示一个带有路由开关的空白页面。这是单击主页时的输出图片

  • Home.js代码

  • 我面临的主要问题是当我单击主页中的 ContactUs 或 About 时,它没有显示相应页面上的内容
  • 它为主页显示相同的内容。
  • 单击关于或联系我们时的图像 单击关于或联系我们时的图像
  • 这是ContactUs.jsAbout.JS的代码

在这里,我不清楚为什么会这样。我的班级组件有什么问题吗?有关此的任何建议或解决方案都对我有帮助。

0 投票
0 回答
85 浏览

javascript - 导入的 CSS 文件和依赖项在 React.Js 中的所有组件中都可用

当我在一个组件中导入 css 文件或依赖项时,它在我不想导入它们的所有其他组件中变得可用,所以我该如何解决这个问题以使导入的文件仅在我导入的同一组件中可用里面的文件。

0 投票
0 回答
579 浏览

javascript - Failed to execute 'pushState' on 'History'. Function could not be cloned

On the following very basic project:

https://stackblitz.com/edit/react-history-push-with-function-as-arg?file=src%2Fpages%2FPage1.jsx

I have the following code:

My problem is that I need to pass a function to the Page2 through the call to: this.props.history.push({...}). For that I'm using: myFunction inside the state array (which is normally used to send parameters on the transition).

Side note you can skip: in my real scenario will be a function that will take care of cancelling an Axios call, especifically with: axios.canceltoken.source().cancel(). Reference: https://www.pluralsight.com/guides/all-need-to-know-about-axios),

but when transitioning to Page2 I get the following error:

as you can see here:

enter image description here

I know I could save the function on the window object while on Page1 and use it while on Page2 but I think that's not a good practice. As I said above, my end goal is to be able on Page2 to cancel an Axios request I started on Page1.

Is there a way for me to pass that function to Page2?

Thanks in advance!

0 投票
2 回答
146 浏览

reactjs - 单击链接加载组件

当在 div 的左列上单击链接时,如何在 div 列中加载特定组件。

单击此处获取问题的图像

0 投票
1 回答
35 浏览

javascript - 在 React Router Dom 中,如果我不按 Enter 或刷新页面,重定向将不起作用

我对 React Router Dom 有一个奇怪的问题。在我的代码中,我有:

在 url 中它正确写入“localhost:3000 / list_services,但它似乎没有加载页面。如果我按回车键或重新加载页面,它会正确显示。有人可以帮助我吗?在我的路由文件中我有:

0 投票
2 回答
262 浏览

reactjs - 如何在 ReactJS 的不同页面上显示不同样式的导航栏?

我有三个不同的导航栏。它们中的每一个都是不同的组件。

  • <PublicNavbar />,用于公共页面,例如 LandingPage、DiscoverPage 等。
  • <AccessNavbar />,用于SignInPage、SignUppage、VerificationPage等。
  • <PrivateNavbar />,用于私人页面,例如 NewCampaignPage 等。

我怎样才能正确地展示它们?如果用户已登录,我想将 DiscoverPage 替换PublicNavbarPrivateNavbar.

示例导航栏代码:

0 投票
3 回答
785 浏览

reactjs - CSS不适用于反应js中的嵌套路由

我是使用前端和反应 js 的新手。我在我的应用程序中安装了一个模板。index.html 文件包含 css 的所有链接和路径

这是我的 app.js 文件。这里我提到了我的上层路线

这是我的布局组件,由所有屏幕组件(较低级别的路线)组成

但不知何故,我的页面,即布局组件没有得到任何 CSS。在我的 app.js 文件中,如果我将 Layout 组件的路由从 (pages/) 更改为 (/),那么一切正常。但是,如果我使用 (pages/ as route) 我不会为布局组件中提到的子路由获得任何 CSS。

0 投票
2 回答
129 浏览

reactjs - 在反应应用程序中分离两个不同的用户界面

我想构建一个反应应用程序,其中将有两种类型的 UI,一种用于管理员,另一种用于用户。页眉和页脚中包含的所有文件都是分开的。我怎样才能做到这一点?

方法 1
为 admin 和 user 创建两个单独的应用程序,例如 user 和 admin.example.com 的 example.com 这样我就可以在 index.html 中包含各自设计的所有 css 和 js 文件

方法 2
集成到一个应用程序中,其中 url 将是用户的 example.com 和 admin 的 example.com/admin。但是我的问题是,资产文件将包含在用户和管理员的何处,将在其中创建相应的模板。

如果问题框架不正确,请帮助并原谅我。

0 投票
2 回答
43 浏览

reactjs - React Router 更改链接但无法更改正文

反应路由器链接标签在第一页和页面也发生了变化,但在第二页有很多链接如果我点击这个链接它可以改变链接但不能改变正文我该如何修复它......路由器代码:

第二页代码

通过 props 传递一些数据

只是显示了这段代码的一小部分...... 请帮助我......我该如何解决这个错误

完整代码在这里: https ://gist.github.com/fahadali32/8643d33a2328c1375552e4ba7637fc92