路由更改时，未路由的React组件不会更新
当路由更改时，未路由的React组件不会自动更新。这是因为React的路由机制是基于组件的，只有当路由匹配到的组件发生变化时，React才会重新渲染该组件。
未路由的React组件指的是当前路由路径下没有匹配到的组件。当路由发生更改时，React会比较新的路由与当前路由是否匹配，如果匹配，则会重新渲染匹配到的组件，否则不会触发更新。
这种设计有一些优势和应用场景。首先，它可以提高应用程序的性能，因为只有需要更新的组件才会重新渲染，而不是整个应用程序。其次，它可以避免不必要的组件更新，减少不必要的资源消耗。
如果你想在路由更改时更新未路由的React组件，可以使用一些解决方案。一种常见的方法是使用React的Context API或Redux来管理应用程序的状态，并在路由更改时更新相关的状态。另一种方法是使用React的生命周期方法，如componentDidUpdate，在路由更改时手动触发组件的更新。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。你可以根据具体的需求选择适合的产品来支持你的应用程序。具体的产品介绍和链接地址可以在腾讯云官方网站上找到。
相关·内容
我正在将现有的react应用程序从使用director迁移到使用react-router。虽然到目前为止我很喜欢它，但使用director维护历史记录而不重新渲染整个页面是很容易的，我不确定使用react-router是否可以做到这一点。
我想要做的是有一个视图，我们称它为Slides，还有另外两个嵌套视图组件，我们称它们为One和Two。
在路由器中，这些组件将映射到/slides、slides/one和slides/two。
Slides包含各种布局组件，如Header、Nav和Footer。这些基本上都是静态的。
现在，当在幻灯片之间导航时，将播放一个过渡动画。使用我之前的路由器，我能够
浏览 3提问于2016-08-08得票数 0
回答已采纳
1回答
我有一个组件，我列出了所有类别的新闻。Links在另一个组件中，但仍然在路由器中。因此，当我更改链接时，它会改变，但内容不会改变。我认为这是因为我的NewsFeed组件(我用所有路由定义了Switch )没有被更新。
它只有当我手动刷新页面时，链接被更改。
我将NewsFeed组件封装为临时的withRouter组件，这样它就可以知道路由器中的所有变化。它确实开始知道这些变化，但内容并没有改变：
NewFeed
import React from 'react';
import { Route, Switch, withRouter } from 'react-rout
浏览 1提问于2020-07-08得票数 0
回答已采纳
我使用的是react 15和react-路由器4。容器与react路由器连接，url参数在每个请求上都会发生变化，然后在Sidebar组件中更新currentUrl支柱。这是在Sidebar.js上本地捕获的，并存储在本地状态(这对于更多的操作是必要的)。但是，在初始呈现时只调用几次componentWillReceiveProps()，如果用户在之后导航，则不会触发。
Container.js
class Container extends React.Component {
render() {
const { match: { url } } = this.pr
浏览 3提问于2018-02-06得票数 1
我安装了react-router-dom并使用以下代码进行路由，但我有错误：
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
class Home extends React.Component{
render(){
return(
<h1>Home</h1>
);
}
}
浏览 1提问于2017-12-21得票数 3
1回答
我正在构建一个React应用程序，Header组件有一个菜单按钮，它可以切换侧栏并进行注销。换句话说，它只需要在用户登录时出现。
我在后端生成一个JWT，并将其存储在localStorage中，这样auth()方法就可以得到它，并决定用户是否登录。问题是，当我登录时，标题不会出现。如果我刷新页面，它就会出现。如果我做的相反，这意味着注销，我被重定向到登录页面，但标题仍然在那里。如果我刷新页面，它就会停止显示自己。
我在auth方法中设置了一个console.log()，我意识到它对触发器没有反应。
我正在使用Ant设计，应用程序结构是
App.tsx
|
| - views
浏览 2提问于2020-07-07得票数 1
我曾经让这个代码在我的搜索组件上工作，但是在on submit被调用后，我收到了这个以前从未发生过的错误，有人知道吗？？
已超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
import React, { Component } from "react";
import axios from "axios";
import { Redirect } from "react-router-dom";
浏览 0提问于2019-05-07得票数 0
我有一个由主要组件组成的react应用程序。，它包含一个带有导航栏标记的元素。
//app.js
import React, { Component } from 'react';
import {
Route,
NavLink,
BrowserRouter,
Switch,
} from "react-router-dom";
import Home from './components/home';
import Create from './c
浏览 0提问于2018-10-22得票数 2
2回答
(react-router-dom版本: 4.1.1)
我已经设置了工作路由，但我有点困惑为什么需要<Switch>：
index.js
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import App from './components/App.jsx';
import FridgePage from './components/FridgePage.jsx';
ReactDOM
浏览 1提问于2017-07-16得票数 52
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
我在做一个反应项目。我面临这个问题:如果用户单击一个嵌套在antd库组件抽屉中的视频图标(该组件还包含其他信息，如锻炼标题)，我希望用户观看与胸部锻炼相对应的视频。我希望用户在不关闭抽屉的情况下被重定向到这个页面(抽屉占页面宽度的50%，页面的其余部分被灰色bg颜色覆盖，但仍然可见)，然后他可以再次导航到前面的信息，如果他点击一个“回”btn。app.js代码
import { Route, Routes } from "react-router-dom";
// pages & components
import { ListOfExercises } from &#
浏览 8提问于2022-10-26得票数 0
6回答
我有一个路径，它接受一个id，并为每个id呈现相同的组件，例如：<Route path='/:code' component={Card}/>
现在，在Link中，我将一个id传递给component.Now，Card组件将根据传递的id获取其他细节。但问题是，它只呈现一个id，如果我单击back并转到下一个id，则不会进行更新。我搜索并发现可以使用componentsWillReceiveProps，但是在React的最新版本中，它已经被废弃了。那怎么做呢？
浏览 2提问于2018-09-10得票数 9
回答已采纳
我是React的新手，我正在使用react-router在路由之间进行重定向。问题是:我转到一条路由，改变了一些状态，使用react-router的Link转到另一条路由，然后返回到最后一条路由，它仍然保持着我之前更改的状态。我正在研究react-boilerplate。那么我做错了什么呢？对不起，我的英语很差。
浏览 10提问于2017-08-25得票数 1
1回答
我创建了一个简单的redux应用程序。在工具中，我检查“高亮更新”。然后单击任意按钮，显示所有组件都已更新，但"AddButton“中的控制台消息没有显示任何内容。错误控制台，反动开发工具还是我？
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } fro
浏览 1提问于2019-02-22得票数 1
回答已采纳
1回答
我正在创建一个反应应用程序与反应路由器@最新和与代码分裂。所有操作都很好，除了布局组件，当我单击“关于链接”或“仪表板”链接时，重新呈现所有内容。请帮我解决这个问题。我已经读了很多博客文章，但没有找到对我有效的解决方案。
我为那个创建了一个存储库。
这是我的部件
主组件
const Main = () => {
// const Layout = React.lazy(()=>import('../Core/Layout'));
return (
<div>
<ErrorBoundary>
浏览 3提问于2020-11-29得票数 0
回答已采纳
我正在尝试使用Xamarin forms webview .Navigated事件来检测react应用程序中的页面位置何时发生更改。然而，它似乎只有在我导航到外部页面时才会发出，而不是在react应用程序中，即使我使用的是react路由器。在我的浏览器中，url会发生变化，但Xamarin webview不会注册这种变化，即使我通过打印webView.Source来手动轮询url。
有没有什么方法可以让我在C#的react应用中检测到导航？
浏览 1提问于2017-07-16得票数 3
3回答
我有三个路由使用相同的组件，并基于路由显示略有不同的内容。问题是，在每个路由上，更改整个组件，从无到有地挂载/卸载，从而导致性能问题。什么是最好的方式，以避免卸下，但仍然使用相同的组成部分，并有这3条路线？
<Route path="/Products" exact render={Products} />
<Route path="/Products/shoes" exact component={Products} />
<Route path="/Products/books" exact component=
浏览 0提问于2018-06-05得票数 1
回答已采纳
1回答
我有一个使用mapbox地图的应用程序，我正在尝试从另一个单独的卡组件中调整视口。我这样做的方式是创建一个viewport上下文，并将viewport和函数传递给map和card组件。
这是可行的，但我遇到了重新命名的问题。每当用户在地图上滚动时，视图端口就会不断变化，因此viewport提供程序中的所有内容都会不断地重新命名。代码的简化版本如下
应用程序
<ViewportProvider>
*Container that holds both the map and the sidebar that renders the card components*
</Vi
浏览 1提问于2022-01-02得票数 3
回答已采纳
我在理解这两者的区别时遇到了一些麻烦：
<Route path="user/:id" component={UserComponent} />
还有这个：
<Route path="user/:id" children={<UserComponent/>} />
使用React路由器时在Switch组件内部。
在这两种情况下，如果url看起来像这样"/user/4322“，这些组件就会呈现出来。我正在阅读React Router文档，但我无法正确理解此用例()
浏览 1提问于2020-11-09得票数 0
1回答
我正在尝试为我的Meteor应用程序实现分页，使用React和mongo。为此，我向我的订阅函数传递了一个极限支持，如下所示：
export default class BookListTable extends TrackerReact(React.Component) {
constructor(props) {
super(props);
var limit = this.props.LimitProp
limit = parseInt(limit) || 5;
this.state = {
subscription: {
booksData: Meteor.subscribe(&
浏览 0提问于2016-09-13得票数 0
回答已采纳
当我将'exitBeforeEnter‘属性添加到带有嵌套路由的动画呈现组件中时，这些路由根本不会呈现，但是当我刷新它们呈现的页面时，移除这个属性或者直接转到组件将会修复它，但是我需要使用react-router中的属性和重定向组件
这是我的代码：
<AnimatePresence exitBeforeEnter>
<Switch location={this.props.location} key={this.props.location.pathname} >
<Route exa
浏览 2提问于2020-08-27得票数 2
4回答
我希望每次路由改变时console.log('Refresh')都会运行(从Component1切换到Component2)。但只有在第一次渲染时才会触发。为什么？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRout
浏览 14提问于2019-09-18得票数 27
回答已采纳
我有一个组件，如果它的prop.paramA与存储在cookie中的paramA值不同，它就呈现出来。
下面是我尝试将cookie管理逻辑移动到一个单独的组件中的尝试。问题是，当showQuestion为false时，问题组件只呈现一次，所以我永远看不到问题。
目前，我的代码如下所示
// question.js
import React from 'react';
import ToggleDisplay from 'react-toggle-display';
import {withCookies, Cookies} from 'react-coo
浏览 0提问于2018-05-03得票数 1
回答已采纳
2回答
我使用下面的方法从其他组件控制我的头文件。然而，当更改页面时，我得到了旧的"can't perform a react state on unmounted“错误 export const store = {
state: {},
setState(value) {
this.state = value;
this.setters.forEach(setter => setter(this.state));
},
setters: []
};
store.setState = store.setState.
浏览 36提问于2019-06-27得票数 1
回答已采纳
我在Layout组件中有一个Layout函数，它获取我的userData并将其存储在redux-store中，但是它是由每个路由更改触发的。
我希望useFffect函数第一次运行，在更改路由时不要再次触发。向服务器发送更多无用的请求是不对的。我怎么能这么做？
这是我的Layout组件：
import { useEffect, useState } from "react";
import Navbar from "../navbar/navbar";
import Footer from "../footer/footer";
import H
浏览 3提问于2021-10-16得票数 0
假设我有index和edit路由。在index中，我选择了item并重定向到edit路由。然后，当我在edit路由上更改表单域上的数据并单击浏览器上的后退箭头时，所做的更改反映在index上，这不应该是因为没有单击保存按钮。
但是，当index路由被刷新时，所做的更改并不能反映哪一个是正确的。现在，index路由如何在不刷新页面的情况下重新加载数据。
浏览 2提问于2019-05-01得票数 1
我正在尝试创建一个本地化解决方案。
为了测试目的，我有以下结构
index.js
import { Provider } from 'react-redux';
import store from './store'; //This is a redux store
import LocalizedComponent from './components/containers/HomeContainer';
function App() {
return (
<Provider store={store}>
浏览 2提问于2017-03-27得票数 0
回答已采纳
3回答
I使用的是react路由器-v4和react 16.
当用户转到不同的路由或返回到同一路由时，我希望重置组件的内部状态。路由更改应该会破坏组件的内部状态，但不会。当路由发生变化时，我甚至找不到通知组件的方法，因为它是嵌套组件，而不是Route组件的直接呈现。请帮帮忙。
这是代码或 --
const initialProductNames = {
names: [
{ "web applications": 1 },
{ "user interfaces": 0 },
{ "landing pages
浏览 1提问于2018-01-31得票数 8
回答已采纳
我使用了一个个性化的历史对象在我的应用程序上使用React路由器。
看起来是这样的：
import { createHistory } from 'history';
import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
...
componentWillMount() {
const browserHistory
浏览 1提问于2016-05-10得票数 4
我尝试在App.js中为经过身份验证的用户添加受保护的路由，但react元素被多次呈现。下面是我的App.js代码 class App extends Component {
constructor(props) {
super(props);
this.state = {
currentUser: null,
isAuthenticated: false,
isLoading: false
}
}
async loadCurrentUser() {
this.setState({
isLoading
浏览 53提问于2021-04-09得票数 2
回答已采纳
2回答
升级我的应用程序到React Router v4，我正在努力寻找一种干净的方式来实现旧的onUpdate逻辑，我以前在导航上使用了隐藏弹出菜单。
我在文档中看到的唯一方法是利用方法，但它似乎比以前复杂得多--有没有更简单的解决方案？
const HidePopupThenRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={matchProps => {
hidePopup();
return <Component {...matchProps}/>
浏览 12提问于2017-02-08得票数 3
回答已采纳
1回答
因此，我正在开发一个react应用程序，其中包括react路由器。我在更改路由时遇到了问题，更改反映在URL中，但挂载组件不会更改。下面是组件，它是我的主要容器组件之一：
class AppContent extends Component {
state = {
isStarted: false
};
componentDidMount = async () => {
try {
await this.props.checkIsScanning();
this.setState(
浏览 0提问于2019-01-27得票数 2
回答已采纳
2回答
这个问题把我逼疯了，我得到了一个由create-react-app创建的简单的应用程序，我正在使用React-Router。
联署材料X：
<Router>
<Route path="/pages/:pageId" component={Page} />
</Router>
在Page中，我在componentDidMount上有一个fetch，它在第一次加载路由时正常工作。
例如，我访问：/pages/13，然后它获取页面数据，但是当我打开：/pages/13，然后单击一个链接组件(从React-Router导入)，将我重定向到：/
浏览 1提问于2018-04-27得票数 3
回答已采纳
基本上，我有一个非常简单的react组件。它所做的就是包装“react-intercom”，并且只有在状态发生变化时才会呈现它。为了简化这个问题，我将shouldCompoenentUpdate()方法硬连接为总是返回false。
import React from 'react';
import Intercom from 'react-intercom';
class IntercomWrapper extends React.Component {
shouldComponentUpdate(nextP
浏览 6提问于2017-09-13得票数 15
2回答
我使用React Router创建了选项卡，每个选项卡具有不同的路由。但是，我希望通过保持隐藏选项卡的挂载来保持选项卡转换之间的选项卡状态。我该如何实现这一点？每次路由切换时，React路由器都会重新挂载每个组件。
有人已经问过这个问题了，，但是还没有得到回答
理想情况下，我会找到一种解决方案，使第一次点击后不显示的选项卡保持挂载状态
浏览 1提问于2017-10-13得票数 6
2回答
下面有一个简单的组件名为Idea
import './Idea.css';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
function Idea() {
const { id } = useParams();
const [ test, setTest ] = useState('');
console.log('Idea rendered');
const handleCha
浏览 6提问于2022-08-05得票数 1
上下文
我正试着用google-map-react展示当地的面包店。
但是，我的子组件console.log(props);中的行StoresGoogleMap将storeLocations和stores打印为[]。如果我在我的StoresGoogleMap组件中使用下面的内容，则它正在工作：
{props.storeLocations.map((storeLocation) => (
<Marker
key={storeLocation.unique_store_name}
lat={st
浏览 10提问于2022-02-22得票数 0
回答已采纳
我最近开始学习React / Redux，现在我正在尝试构建一个小的单页应用程序。
最近我遇到了一个我不明白也无法解决的问题。
让我给你看看密码：
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute
浏览 2提问于2016-07-08得票数 3
回答已采纳
2回答
在我的主修课上，我有一个导航栏，其选项如下：
<NavDropdown title="Search" id="collasible-nav-dropdown">
<NavDropdown.Item href="#/searchpage/p" onClick={this.dontEdit}>Find People</NavDropdown.Item>
<NavDropdown.Item href="#/searchpage/s
浏览 1提问于2020-01-18得票数 2
回答已采纳
为什么使用react-router在页间更改时react组件中的状态重置？
据我所知，只要您使用“react”的更改方式，您就应该能够使用react-router在路由(组件)之间切换。<Link to="/otherRoute" />。对我来说不是这样，我也不明白为什么。以下是代码：
App.js
import RoutesComp from "./RoutesComp";
import { Link } from "react-router-dom";
function App() {
return (
<d
浏览 0提问于2021-10-16得票数 2
回答已采纳
我正在尝试更新基于此页面上的作者ID显示的帖子，使用react redux和其他两个组件中的useCallBack来更新count和authorID，但下面的孩子没有更新。 Post.js import React from 'react'
import '../App.css';
import axios from 'axios'
import { Button } from '@material-ui/core';
class Posts extends React.Component {
constructor(
浏览 7提问于2021-04-12得票数 0
3回答
我使用的反应路由器与反应。我的一些组件定义了子路由，因此我希望传递给它们一个回调，它允许返回到特定的路由/组件。我希望避免将字符串传递到特定的路由(因为在代码中发生路由更改时存在依赖关系)。因此，我更喜欢传递回调，并将其填充到match.url的值中。
但是这是行不通的: match.url不是传递值，而是总是引用当前的路由。
父组件(简化)：
export class ParentComponent extends React.Component {
render() {
const { history, match, contentId } = this.props;
浏览 0提问于2018-05-19得票数 2
回答已采纳
1回答
基于本文：，我试图在react中创建一个自定义游标组件
我使用的是，问题是悬停事件只在初始页面加载时或刷新页面后处理路由器组件中的内容。
然而，悬停总是在nav组件链接上工作。我已经设置了一个基本的CodeSandbox，在这里您可以看到nav链接上的悬停是如何工作的，而不是在页面内容链接上(在初始页面加载之后和在页面之间导航时)。
我是一个反应的初学者，所以我肯定我做错了这件事。有人能帮忙吗？
浏览 1提问于2020-08-22得票数 0
回答已采纳
我刚刚在我的网站上实现了一个全球搜索，我开始有问题的反应-路由器。如果url更改参数，则不更新视图。
例如，从/users/454545导航到/teams/555555就像预期的那样工作。但是，从/teams/111111导航到teams/222222会更改url，但组件仍然是/teams/111111。
这是我的搜索输入字段的代码。
const SearchResult = ({ id, url, selectResult, text, type }) => (
<Row key={id} onClick={() => selectResult(url)} widt
浏览 5提问于2020-07-10得票数 3
回答已采纳
3回答
我试图在React中创建一个登录和注册页面，其想法是它们应该在同一个页面上呈现，并且用户应该能够在它们之间切换(类似于这个)
我可以在组件之间创建切换函数(使用useState)，但问题是我也需要根据用户的选择更改url (如果用户想登录，url应该是"/login"，如果注册=> "/signup")。我为Login和Signup创建了不同的组件，但它们是在不同的页面上打开的，我想要实现的是，它们都在同一个登录页面上。
import React from "react";
import "./styles.css";
i
浏览 0提问于2020-11-06得票数 2
回答已采纳
我们经常听说React中的两个阶段，DOM更新和重新呈现。我们知道，React使用协调和差异算法来更新DOM。同样，如果状态发生变化，react将重新呈现组件和子组件(如果未使用备忘录)。那么，这些DOM更新和重新呈现之间的基本区别是什么呢？
浏览 3提问于2021-06-12得票数 0
我使用react-router-dom来帮助处理路由，但是在用户的身份验证状态更改后，当我尝试切换到"/“路由(我的主页)时，它不会触发重定向。路由在整个应用程序中以其他方式工作(通过链接)。应用程序在整个过程中都正确地反映了用户状态，只是没有重定向。 我的SignUp组件是一个类，而不是功能组件，所以我不能使用useHistory这样的钩子。 这是我的App.tsx： componentDidMount() {
auth.onAuthStateChanged((user) => {
this.setState({ currentUser: user },
浏览 17提问于2020-09-06得票数 0
React的新特性-原生的，正在努力更新当前视图。我有一个组件LanguageSelector，这是由应用程序组件加载。现在，当更改语言时，我希望将App组件字符串更新为新选择的语言。 一旦用户登录，语言选择器组件也会加载到header组件中，并且可以随时更改语言。我见过this explanation，但是通过监听每个组件上的语言变化来调用this.forceUpdate()似乎不太好，而且当组件嵌套时，情况会变得更糟。 我正在使用react-native-localization，我所做的一切就是(并且它是有效的)： import LocalizedStrings from 'r
浏览 20提问于2019-09-21得票数 0
2回答
我试图滚动到每一个页面的顶部，使用v6进行更改。代码只在我的主页上滚动，而不是在我的字符详细信息页面上滚动。我已经尝试过许多解决方案，但无法使它们发挥作用。我用的是“react路由器-dom”："^6.2.2"，
这就是我到目前为止所取得的成就：
ScrollToTop.js：
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop({ children }) {
浏览 3提问于2022-04-02得票数 1
我在前端使用，我得到了这个错误：
index.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
in Login (created by Context.Consumer)
in Route (at App.js:46)
in AuthContextProvider (at App.js:37)
in Swi
浏览 6提问于2020-10-11得票数 11
回答已采纳
import * as React from "react";
// import "./style.css";
export default function App() {
let [width, setWidth] = React.useState(window.innerWidth);
let [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
console.log("us
浏览 14提问于2022-11-17得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
