React route不刷新_Litwak的博客

相关文章推荐

爱喝酒的白开水 · 不使用ps怎么查看Linux进程信息_没有p ...· 1 周前 ·

爱玩的金鱼 · input[type=file]标签 ...· 4 月前 ·

帅气的枕头 · Unsafe类park和unpark方法源码 ...· 1 年前 ·

挂过科的韭菜 · Git的使用（一）：创建本地仓库并在其中添加 ...· 1 年前 ·

爱运动的热带鱼 · C++ 11 Lambda表达式 - ...· 1 年前 ·

闯红灯的台灯 · java - ...· 1 年前 ·

import './Body.css';
import React, { lazy, Component, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('../Home'))
const About = lazy(() => import('../About'))
const User = lazy(() => import('../user/User'))
const Error = lazy(() => import('../Error'))
class Body extends Component {
  // 配置路由规则  exact表示精确匹配，防止匹配其他页面的时候匹配到/，也就是首页
  // Switch表示如果匹配到了路由，就不再往下面匹配了，如果不写Switch，则一直会匹配到404页面
  render() {
    return (
      <div className="body">
        <Router>
          <Suspense fallback={<div>Loading...</div>}>
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/about" component={About} />
              <Route path="/user" component={User} />
              <Route component={Error}></Route>
            </Switch>
          </Suspense>
        </Router>
export default Body;

import './Body.css';
import React, { lazy, Component, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router';
const Home = lazy(() => import('../Home'))
const About = lazy(() => import('../About'))
const User = lazy(() => import('../user/User'))
const Error = lazy(() => import('../Error'))
class Body extends Component {
  // 配置路由规则  exact表示精确匹配，防止匹配其他页面的时候匹配到/，也就是首页
  // Switch表示如果匹配到了路由，就不再往下面匹配了，如果不写Switch，则一直会匹配到404页面
  render() {
    return (
      <div className="body" key={this.props.location.key}>
        <Router>
          <Suspense fallback={<div>Loading...</div>}>
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/about" component={About} />
              <Route path="/user" component={User} />
              <Route component={Error}></Route>
            </Switch>
          </Suspense>
        </Router>
export default withRouter(Body);

路由组件添加key，跳转识别。这里的location有属性key。

withRouter是react-router的一个高阶组件，可获取history

render时会把match, location和history传入props

react中经过路由渲染的组件才拥有路由参数，使用this.props.history.push('/a')跳转到对应路由的页面

使用withRouter可以将路由参数传入this.props中

官方文档： You can get access to the history object’s properties and the closest <Route> 's match via the withRouter higher-order component. withRouter will pass updated match , location , and history props to the wrapped component whenever it renders.

使用withRouter关联页面组件实现跳转刷新。错误示例import './Body.css';import React, { lazy, Component, Suspense } from 'react';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const Home = lazy(() => import('../Home'))const About = lazy(() import useUrlState from '@ahooksjs/use-url-state'; const [state, setState] = useUrlState({ 路径参数1: '1', 路径参数2: '10' }); state：即你当前路径上的参数 setState：即修改你当前路径上的参数官网地址贴这里了贼好用 useUrlSta

react 路由参数跳转后再刷新页面，参数丢失在学习ant Pro前端框架时，遇到一个问题，从A页面传到B页面的参数，正常跳转的话，B页面显示没有问题，在这个基础上刷新 B页面，会出现空白，原因是传过来的参数丢失。查阅资料后，了解到有两种方法，第一种是截取url，第二种是使用sessionStorage。使用sessionStorage时，A页面还是正常传递参数，B页面在接收参数时，要有所改变： let id; //先定义一个存储参数的变量 if(this.props.location.query &am

React Router DOM 通过基于JavaScript的导航技术，可以实现路由切换而不刷新整个页面。只需要使用 React Router DOM 的组件，将你的页面中的链接替换为它就可以了。举例来说，你可以将这样的链接：用户详情替换为这样：用户详情。这样就可以实现路由切换而不刷新整个页面。

React 逻辑式导航 React 中的路由大多是用 React -router来实现的。但是标签和标签往往仅限于声明式路由，即往往写在标签中，用于主体界面之间的内容切换。如下所示： <Router > <Switch> <Route exact path={"/"} component={Login} /> <NavigationBar> <Switch> {pageList.map((item

这其实是一个很常见的问题,当使用push的时候,会向 history 栈添加一个新的记录,这个时候,再次添加一个完全相同的路由的时候,就不会再次刷新了. 没有耐心的可以直接看第九种方式,绝绝子,适用所有场景. 解决办法有这么几种: 1. 添加activated函数。 activated（）{ 在这里插入代码片 2. 通过路由监听的方法。将mounted下的方法函数放到watch路由下 // 不推荐、用户体验不好 watch: { '$route' (to, from) { // 路由发

项目进展过程中，将 react -router-dom升级至v4.0.0以上，随后引发了页面跳转过程中的诸多问题，查知源码升级到4以上后发生了诸多变化，如不允许<Router>的多层嵌套等。做了一些适配修改后，最终仅剩一个问题，刷新时，始终是404。后查找及尝试发现一层嵌套时，将外层<Router>换成<HashRouter>即可解决无法刷新的问题，特此记之。

SPA：单页面多路由，旨在通过多路由来模拟多页面的效果单页面多页面指的是 .html 文件，网站切换 html 文件就会刷新。SPA可以做到不刷新页面就可以在多个页面之间切换。传统的加载网页方式是每次切换都得请求后端数据，然后在前端刷新页面。

### 回答1：在 React 中使用Hooks时，可以通过使用`useState`或`useReducer`来创建状态，并使用`useEffect`来进行一些副作用操作。通常，当state或props发生变化时，组件会自动重新渲染。但有时候，我们可能希望手动触发组件的重新渲染，即强制刷新组件。要强制刷新组件，可以使用`useState`或`useReducer`的返回值中的第二个参数，通常叫做`setCount`或`dispatch`。我们可以在需要的时候调用该函数来更新状态。举一个例子，假设我们有一个计数器组件，我们希望当点击一个按钮时，手动触发组件的重新渲染。我们可以这样做： ```javascript import React , { useState } from ' react '; const Counter = () => { const [count, setCount] = useState(0); const handleClick = () => { // 手动强制刷新组件 setCount(count + 1); return ( <p>Count: {count}</p> <button onClick={handleClick}>Click me</button> export default Counter; 在上述例子中，通过点击按钮，我们调用了`setCount`函数并传入了一个新的count值，即`count + 1`。这会更新count的值，并触发组件的重新渲染。需要注意的是，尽管我们手动触发了组件的重新渲染，但 React 会进行一些优化，只会重新渲染发生变化的部分，而不是整个组件。这样可以提高性能，并避免不必要的重新渲染。 ### 回答2： React Hook 中有一个特殊的 Hook，叫做 `useEffect`。`useEffect` 可以在组件渲染完成后执行一些副作用操作，比如发送网络请求、订阅事件、更新 DOM 等。我们可以利用 `useEffect` 来实现 React 组件的强制刷新。当我们想要强制刷新组件时，可以在 `useEffect` 中使用一个状态变量来触发更新。我们可以创建一个名为 `refresh` 的状态变量，并在组件中使用 `setRefresh` 方法来更新它的值。然后，将 `refresh` 添加到 `useEffect` 的依赖数组中，以确保每次 `refresh` 发生变化时都会触发 `useEffect`。具体的代码如下所示： ```jsx import React , { useEffect, useState } from ' react '; function MyComponent() { const [refresh, setRefresh] = useState(false); useEffect(() => { // 当 refresh 发生变化时，进行一些需要刷新的操作 // 比如重新发送请求、更新数据等 // 这里可以写需要强制刷新的操作代码 // 强制刷新结束后，重新将 refresh 的值设置为 false setRefresh(false); }, [refresh]); function handleRefreshButtonClick() { // 当点击刷新按钮时，将 refresh 的值设置为 true // 这会触发 useEffect 中的代码执行，实现强制刷新 setRefresh(true); return ( <h1> React 组件强制刷新 </h1> <button onClick={handleRefreshButtonClick}>点击刷新 </button> export default MyComponent; 在上述代码中，我们创建了一个带有一个按钮的组件，点击按钮会触发 `handleRefreshButtonClick` 函数，该函数会将 `refresh` 的值设置为 true，从而触发 `useEffect` 中的代码执行，实现组件的强制刷新。请注意，`refresh` 变量是一个开关，用于触发刷新，因此我们在实际项目中可能会使用更具有语义化的变量名。另外，强制刷新可能会导致性能问题，因此请慎重使用，确保真的有必要进行强制刷新。 ### 回答3： React Hook强制刷新是指在函数组件中使用useState或useReducer Hook时，通过修改状态值来更新组件的渲染。当状态值发生变化时， React 会自动调用组件的render函数来重新渲染组件。在函数组件中，我们可以通过调用setState或dispatch来修改状态值，从而触发组件的重新渲染。setState和dispatch会接收一个新的状态值作为参数，并将其传递给 React ，然后 React 会比较新旧状态值是否发生变化，如果有变化，则进行重新渲染。有时候，我们希望在某些特定情况下手动触发组件的重新渲染，而不是等待状态值发生变化。为此， React 提供了一个名为forceUpdate的方法，用于强制组件进行重新渲染。在函数组件中使用forceUpdate方法时，我们需要先创建一个ref对象，并将其赋值给组件的某个属性，在需要强制刷新的地方调用该属性上的current.forceUpdate()方法即可。需要注意的是，forceUpdate并不会引发组件内部状态的变化，它仅仅会触发组件的重新渲染，并且会忽略组件的shouldComponentUpdate生命周期方法，无论shouldComponentUpdate返回什么值，组件都会重新渲染。由于 React 官方不推荐频繁使用forceUpdate方法，因此在使用时应慎重考虑。一般情况下，我们建议优先考虑使用useState或useReducer来管理状态，并通过修改状态值来触发组件的重新渲染。只有在特殊情况下，才考虑使用forceUpdate来进行强制刷新。