React route不刷新

最新推荐文章于 2025-02-28 17:06:48 发布

Litwak

最新推荐文章于 2025-02-28 17:06:48 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.youkuaiyun.com/u013475983/article/details/109455188

版权

前端专栏收录该内容

22 篇文章

订阅专栏

博客介绍了在React中使用withRouter关联页面组件实现跳转刷新的方法。withRouter是react-router的高阶组件，可获取history，将路由参数传入props。还给出错误与正确示例，提到路由组件添加key可实现跳转识别，经路由渲染的组件才有路由参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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('../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>
      </div>
    )
  }
}

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>
      </div>
    )
  }
}

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.