问题 Calling history.push() inside of a component seems to cause the entire react component to unmount and remount; causing pointless remote service calls. 具体来说，我有一个在组件条目上触发的远程服务调用。我不想重新安装组件，也不想重新运行服务调用（速度很慢）。 It seems like history.push(location.pathname + '...

I found an example in Codepen https://codepen.io/dbilanoski/pen/LabpzG?editors=1010 of what I am wanting to do in my React Application. When I scroll down the the page it should highlight that section in my navbar, which is sticky at the top of the page. M...

Let's say I have a React component called Component1, where it makes plots based on the data provided -- import data_A from "./some/folder/A"; import data_B from "./some/folder/B"; . . . import data_Z from "./some/folder/Z"; const Component1 = (props) => ...

通过ReactJS拥有一个非常基本的应用程序，但是在路由到新页面时遇到了麻烦，无法弄清原因。当我单击将我定向到测验页面的框时，该页面上的内容将填充（只是说“你好”），但页面上的所有其他内容均保持不变。我以为它与确切的路径有关，但即使如此，所有内容仍保持不变，而不仅仅是显示测验组件中的内容。有什么想法吗？感谢所有帮助！ APP.JS import React, { Component } from 'react'; import { Route, Link, Switch } from 'react-rout...

I'm trying to export a class component with withRouter and withTranslation. For localization, I'm using i18next and react-i18next. This works fine in react with javascript. But I'm using react with typescript. 零件 - class TableSorter extends React.Component...

I have this program where Product.js just showing a list of items with an addToCart button. In the Cart.js, I am trying to show just the items I selected. Following are the files: App.js import './App.css'; import React,{useState} from 'react'; import { ...

我的应用程序有多个标记为“红色”，“绿色”，“蓝色”和“粉红色”的页面。为了允许用户在页面之间导航，我使用了React Router（v5.2.0）。路由被包装在TransitionGroup（v4.4.1）中，以便当用户导航到新页面时，淡入过渡效果将应用于该页面，从而使其慢慢淡入视图。此过渡的持续时间为5000ms。 **问题** 该应用程序在“红色”页面上初始化。假设用户在Blue的转换仍在进行中时，先单击“ Blue”页面，然后单击“ Pink”页面。在这种情况下，我想取消Blue的过渡，而仅立即显示...

单击其他组件页面链接时，我想隐藏应用程序组件的内容。 对，当我单击其他链接（例如关于我们的页面）时，它的显示应用程序组件内容以及关于我们的页面内容（既显示内容）也不会，所以一旦单击关于我们的页面，我只想显示关于我们的内容。 另外，当我将App coponet补丁定义为“ /”时，应用程序会继续加载 下面是代码 App.js import React, { Component } from "react"; import Navigation from "./components/Navigation"; ...

I've been trying sort out how to create functions dynamically while trying to teach myself react-router-dom following the first example here https://reacttraining.com/react-router/web/guides/quick-start 我已经整理了如何创建Router＆Switch的内容，但是在示例的最后，我对如何创建支持功能一无所知。 我...

看了其他有关params的帖子，但是我没有运气。 我有一个用户配置文件，单击该用户配置文件可显示用户的元数据，并具有一个用于更改昵称键值的编辑按钮。 我的useParams昵称未定义回来。 我知道这是很多代码，我在这台计算机上坐了太久了，现在无法解决。 我的Profile / index.js import { Link, useParams } from 'react-router-dom'; import PropTypes from 'prop-types'; const ProfileInfo =...

我需要在路线更改之间显示一个微调框。像这样： https://codesandbox.io/s/beautiful-williamson-dvxcj 所以这就是我想出的： function LayoutLoaderTransition() { const [, setForceUpdateBoolean] = useState(false); // A BOOLEAN STATE TO FORCE RE-RENDERS const location = useLocation(); ...

我是一个崭新的反应者，最近我在尝试单击卡媒体（使用材料ui）导航到页面时遇到了此错误。因此，我几乎按照说明进行操作，以通过历史记录推送到我想通过功能导航到的页面的路线，并在单击媒体卡时调用该功能。下面是我的代码和我得到的错误。您知道为什么我可能对此有疑问吗？ 这是我得到的错误： Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of...

我是个新手，现在我想同时使用React Router和Material UI。 我有一个布局文件，它使用材料UI中的导航抽屉，并且将菜单放在左侧，内容放在右侧，如下图所示。 What I want to do is, when I click on the Test Comp it should load the TestComp.js component on the right and so on for Test Comp One to load TestCompOne.js. 我已经使用链接，开关和...

我在从父组件访问参数ID时遇到问题。我知道道具是从父组件传递到子组件的，所以例如Dashboard组件可以访问id，而侧边栏组件则不能。话虽如此，但有任何方法可以为边栏提供该ID，以便在选择标签页时可以正确路由。 Signin.js case 'server': props.history.push('/profile'); break; case 'manager': if (user.linkedRestaurants.length...

尽管我已经按照几篇文章和material-ui网站示例中的说明应用了forwardRef，但是在控制台中仍然有警告。我真的不明白为什么。 我正在尝试创建带有项目列表的抽屉，这些项目是嵌入到Material-UI链接组件中的react-router链接。我嵌入它们是为了受益于我创建的全球MUI主题 PS：这是一个打字稿代码。引用强类型是一个地狱;-) HERE IS CODESANBOX TO REPRODUCE THE ISSUE. Make sure to extend enough the codesa...

I am using BrowserRouter and history.push to navigate between pages. I want to traverse to a new page with query parameters entered in the first page. i.e., in the homepage, there is a search bar where user enters some search string abc, and when the butto...

在我的小型网络应用中。顶级App.js包含以下结构： ... import Main from './components/MainComponent'; import { ConfigureStore } from './redux/configureStore'; const store = ConfigureStore(); class App extends Component { render() { return ( // make store available t...

I have a monorepo with multiple apps & libraries in it which works really well (yarn based). I did some refactoring lately and identified a common component which I wanted to "outsource" in my 'commons' library. This contains a component that uses a ReactR...

我正在尝试将选定的导航项显示为active.I检查有关问题，但我找不到我的代码有什么问题。 我知道通过使用NavLink，我们可以在选择Nav-Item时默认将其激活。 但是现在，我尝试使用Link，显示一些路径名错误。 TypeError：无法读取未定义的属性“路径名” 请帮助我知道，我的代码有什么问题。 还是有其他选择来显示活动的导航项？ 我尝试了以下代码： import React from "react"; import { IndexRoute, Link } from "react-router...

我有一个具有以下组件结构的React应用程序： App.Js Dashboard.js Component1.js Child1.js Subchild1.js SubSubChild1.js SubSubChild2.js Component2.js Child1.js SubChild1.js 仪表板组件同时调用Component1和Component2，然后Component1.js调用Child1.js，后者又调用Sub...