如何在url更改后重新呈现组件
在前端开发中，当URL发生变化时，重新呈现组件是一个常见的需求。下面是一个完善且全面的答案：
在前端开发中，当URL发生变化时重新呈现组件可以通过以下几种方式实现：
- 使用路由库：在现代前端框架中，通常会使用路由库来管理URL和组件之间的映射关系。常见的路由库有React Router、Vue Router等。这些库提供了一种声明式的方式来定义URL和组件之间的关系，并且在URL发生变化时自动重新呈现相应的组件。例如，React Router可以通过定义<Route>组件来实现URL和组件的映射关系，当URL发生变化时，<Route>组件会自动渲染相应的组件。
- 监听URL变化：在一些没有使用路由库的情况下，可以通过监听URL变化的方式来重新呈现组件。可以使用浏览器提供的window对象的事件，如popstate事件或hashchange事件来监听URL的变化。当URL发生变化时，可以通过相应的回调函数重新呈现组件。
- 使用URL参数：URL参数是指URL中的查询字符串或路径参数，可以通过解析URL参数的方式来重新呈现组件。在React中，可以使用react-router-dom库提供的useParams钩子函数来获取URL参数，并根据参数的变化重新呈现组件。
- 使用状态管理库：在一些复杂的应用中，可能需要在多个组件之间共享URL的状态。可以使用状态管理库来管理URL的状态，并在URL发生变化时重新呈现组件。常见的状态管理库有Redux、Mobx等。这些库提供了一种集中式的方式来管理应用的状态，并且可以在URL发生变化时触发相应的状态更新。
总结起来，当URL发生变化时重新呈现组件可以通过使用路由库、监听URL变化、使用URL参数或使用状态管理库来实现。具体的实现方式可以根据项目的需求和技术栈选择适合的方法。
相关·内容
1回答
我将如何重组我的React，以便我可以将状态传递给另一个路由上的组件
javascript、reactjs
我有三个组件被路由到不同的路径。我想重组我的应用程序，以便我可以通过道具将状态从我的SubmitProject组件传递到我的Portfolio组件，我仍然希望它们有单独的路径，即/portfolio和/SubmitProject，我计划打开两个浏览器窗口来测试，当我在SubmitProject上提交表单时，它会出现在Portfolio上，然后我将使用防火墙将我的状态持久化到一个数据库。
我是否需要让我的状态处于像App.js这样的顶级组件中，然后在其中包含BrowserRouter？如果是这样的话，我如何重新创建由<SubmitProject/> -> <Portfol
浏览 0提问于2018-10-05得票数 0
2回答
React组件未在window.location更改时重新呈现
javascript、reactjs、redux、react-redux、react-router
所以，我有一个用于主菜单的react组件。
它是指向不同页面react-router <Link/>的列表。每个链接都会检查window.location.path以确定它是否是活动页面，以便活动菜单项可以以不同的方式呈现。
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/
浏览 0提问于2018-09-25得票数 2
3回答
如果redux库可以直接在react中使用，为什么react-redux是必需的？
javascript、reactjs、redux、react-redux、redux-store
我试图在我的react应用程序中使用redux，但是我发现我可以在我的应用程序中显式地使用redux，而无需使用react-redux库。 const redux = require('redux'); 我想知道为什么我们甚至需要在我们的环境中使用react-redux库？有人能帮我一下吗？
浏览 51提问于2021-11-05得票数 0
回答已采纳
1回答
反应路由器v4 NavLink活动路由
javascript、reactjs、react-router、react-router-v4
我正在尝试将我的项目从使用v3 of react-router移植到现在称为react-router-dom的v4。现在，当我有一个与路由逻辑完全独立的MenuBar组件(正如您所期望的那样)时，就会出现问题，因为不管当前路径是什么，它都会显示完全相同的链接。现在，这一切在v3中都能很好地工作，但是现在当我使用具有相同activeClassName属性的NavLink时，活动路由不会在NavBar上更新，只在刷新时更新。这听起来有点傻，所以一定有办法解决这个问题。
export default @inject('ui') @observer class App extend
浏览 2提问于2017-03-12得票数 7
回答已采纳
1回答
在刷新时在重定向时响应导航组件丢失数据
reactjs
我使用的是React 16.4.1和React路由器-Dom 4.3.1。我已经构建了一个侧栏反应组件，使用一个web组件，您将数据传递到web组件中，这将呈现该组件。
这是侧栏组件。
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { Redirect } from 'react-router-dom';
class Sidebar extends React.Comp
浏览 0提问于2018-09-20得票数 2
回答已采纳
2回答
将组件更改为容器似乎会破坏该组件中的路由。
reactjs、redux、react-router
我遇到了一个问题，在这个问题上，制造一个包含路由到容器的组件似乎会破坏响应路由器。如果容纳我的路线的组件是一个容器，那么单击一个链接就会更新URL，但是不会改变呈现的屏幕。如果我在URL更改后刷新页面，或者直接转到url，它就会呈现预期的视图。将容器更改为常规组件似乎解决了这个问题，但我希望将其保留为容器，以便可以使用必要的操作。
路线中断：
import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { bindActionCreators
浏览 3提问于2017-11-10得票数 0
回答已采纳
2回答
如何防止使用React-Router和Framer Motion重新渲染父路由？
javascript、reactjs、react-router、framer-motion
我正在使用带React Router的Framer Motion来创建不同路由之间的动画。 我遵循了这个教程：https://www.youtube.com/watch?v=qJt-FtzJ5fo 我将尝试将问题总结为以下几点： 我正在使用React路由器v6进行路由，我的应用程序上有多个嵌套路由和并行交换机，用于不同的组件，这是一个简单的目录。 我已经向每个页面的{content}组件添加了过渡，并将{footer}和{header}组件保留在不同的开关上，以防止它们产生动画效果。 我还将location={location} key={location.pathname}添加到switc
浏览 23提问于2020-08-30得票数 1
2回答
反应-路由器:交换机重定向不工作在本地主机:xxxx。从baseUrl重定向到其他页面
javascript、reactjs、react-router
我必须为我的应用程序配置路由。我是在我当地的系统里做的。我使用的包是"react-router": "^4.3.1"、"react-router-dom": "^4.3.1"、"history": "^4.7.2"和"connected-react-router": "^4.3.0"。
当用户导航到http://localhost:xxxx/login时，我希望用户被重定向到http://localhost:xxxx。在prod上的实际场景中，baseUrl应该从wi
浏览 1提问于2018-12-01得票数 0
回答已采纳
1回答
当Resivev15.5使用React redux v5是设置时，路由没有导航
javascript、reactjs、react-router、react-redux、react-router-redux
我是新的反应，我已经建立了我的反应项目与脸谱的。以下是核心文件：
Index.js
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import { createStore, applyMiddlew
浏览 4提问于2017-07-13得票数 6
回答已采纳
2回答
getComponent不呈现组件
javascript、reactjs、webpack、react-router、single-page-application
我试图建立与反应路由器和webpack.require.ensure函数加载模块，但方法不呈现组件。
在我的示例中，Button组件默认呈现(在主页上)。当我单击按钮时，路由器将我重定向到/admin url，我可以在我的web控制台中看到require.ensure加载了新的块，但是Label组件没有呈现。
index.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, useRouterHistory, bro
浏览 1提问于2016-10-31得票数 4
回答已采纳
4回答
React.js如何重新呈现组件？
reactjs
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
1回答
React路由器V6在路由更改时的重新呈现
javascript、reactjs、react-router、react-router-dom
当我在路由之间来回导航时，React路由器重新呈现回传路由，导致useEffect(() => [])重新运行，数据重取。我想要防止这种情况，而是保持现有的路线，但隐藏在这片土地上。不过，我还是很纠结于“怎么做”。
以下是问题的示例代码：
import React, { useEffect } from "react";
import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
export default function App()
浏览 5提问于2022-09-07得票数 1
回答已采纳
1回答
使用冻结应用过滤器在通道冻结/解冻后更新<ChannelList />
getstream-io、getstream-chat
我正在尝试使用流react组件构建聊天前端，返回具有此结构的ChatPage组件。
<ChatConfig config={config}>
<Chat client={client} customStyles={options?.theme}>
<ChannelList
Preview={CustomChannelPreview}
filters={filters}
sort={sort}
/>
<Channel>
浏览 4提问于2022-06-14得票数 0
回答已采纳
1回答
React图形组件不会在useEffect中出现的url更改上重新呈现。
javascript、reactjs、react-native、react-hooks、axios
我正在制作一个交互式的图表，当你选择不同的日期时，它会重新呈现。过去，在我做一些基本更改之前，它会重新呈现很好的效果(将state responsibilites移动到组件，而不是app.js。当我更改日期时，它似乎确实更改了负责进行api调用的组件中的url。然而，即使是在一个useEffect中，它也没有重新呈现，而且它以前也进行了重新呈现。
我是新来的，所以这可能是很明显的事情。我也不确定这是否是正确的方法，所以我对改进我的应用程序或最佳实践的任何指针都是开放的。
App.js:最好是删除app.js中的useGetData和useURLSwitcher，但是没有它们它就无法在启动时加载
浏览 8提问于2022-04-06得票数 0
2回答
对另一个组件道具上的组件重新安装作出反应
javascript、reactjs、redux
我有一个反应路由器-redux应用程序，有一个voip呼叫处理栏之上的所有页面。voip条具有计时器，该计时器对呼叫的时间进行计数，其间隔为每秒钟递增时间。
由于某种原因，每当voip条重新呈现一个支柱更改的原因时，显示的页面(使用react路由器)将重新挂载。我不知道为什么，因为voip条甚至不是一个孩子/家长的网页。
我真的不知道为什么会这样。我想，也许每个道具的改变都会改变路线，从而导致重装，但这并不是问题所在。
布局：
<div className={classes.layout} id='layout'>
<Header isAuthentica
浏览 0提问于2019-03-25得票数 1
3回答
简单反应计数器
javascript、.net、visual-studio、reactjs、typescript
我刚开始学习React，并选择使用Visual的.NET + React模板，该模板在.tsx文件中给了我这段代码，演示了如何制作一个简单的按钮来增加计数器：
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
interface CounterState
{
currentCount: number;
}
export class Home extends React.Component<RouteComponentProps&
浏览 2提问于2018-02-14得票数 3
回答已采纳
1回答
将参数传递给另一个组件
reactjs
如何正确地将参数从一个组件传递到另一个组件。在我的场景中，当我通过控制台将pass参数记录到另一个组件时，它们在最后一个组件中的实际字符串之前有一个空字符串。它应该只是实际的字符串。
组件1：
import React, {useState, useEffect} from 'react'
import {dataComponent} from './include/childComponent'
export default function Parentcomponent(props) {
const [data, setdata] = u
浏览 9提问于2019-08-02得票数 0
回答已采纳
1回答
React - InfiniteScroll(react-infinite-scroller)，loadMore函数重新呈现整个列表
reactjs、redux、infinite-scroll
我已经为我的一个组件实现了无限滚动。代码结构如下所示 我有一个名为的父组件，这个组件执行文章列表的抓取调用。下面是代码 import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Row from 'muicss/lib/react/row'
import ReactCSSTransitionGroup from 'react-addon
浏览 141提问于2019-03-19得票数 0
回答已采纳
2回答
如何在react中的不同组件之间传递参数
javascript、reactjs、react-router
我想知道是否有任何方法可以将参数(或变量)传递给不同的组件(例如，如果我单击一个按钮，该按钮的onClick函数可以将我重定向到另一个组件，该变量应该立即加载，并显示一个不同的屏幕)我正在使用react-router 3.0.0，我希望有类似的功能，如react-native
Actions.somepage({ls: variablename});
当该页面加载时，应该有一个像this.props.ls这样的函数来获取该值。
有人能告诉我怎么做吗？(我正在使用this.context.router.push('/');进行路由)
浏览 7提问于2017-05-27得票数 0
2回答
not路由器不卸载位置参数更改
javascript、reactjs、react-router
这个问题把我逼疯了，我得到了一个由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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
