• 技术文章 >web前端 >前端问答

    react路由跳转不刷新怎么办

    藏色散人藏色散人2023-01-18 14:59:26原创65

    react路由跳转不刷新的解决办法:1、在路由组件最上层元素上加一个key增加路由的识别度;2、使用withRouter关联组件,代码如“render() {return (<div key={this.props.location.key}></div>); }}export default withRouter(routers);”。

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react路由跳转不刷新怎么办?

    react 跳转后路由变了页面没刷新

    问题

    这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转
    如下所示
    193f94a4ae386e4e8da3160594feb00.jpg

    解决方案

    在路由组件上最上层元素上加一个key增加路由的识别度,因为普通的跳转是根据path来识别的,但是path带上参数时,路由无法精确识别。不过,在跳转页面的时候,每个地址都会在localtion对象里添加一个key。如下打印

     // 组件挂载
      componentDidMount() {
        console.log(this.props.location);
      }

    在这里插入图片描述
    我们将这个key绑定在 路由顶层元素上就能精确定位路由了

     render() {
        return (
          {/*就是这个key*/}
          <div key={this.props.location.key}>
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/products/:id" component={Products} />
                <Route exact path="/about" component={About} />
                <Route exact path="/solution" component={Solution} />
                <Route
                  exact
                  path="/solutionDetails/:id"
                  component={SolutionDetails}
                />
                <Route exact path="/download" component={Download} />
                <Route path="/about" component={Download} />
                <Route exact path="/details/:id" component={Details} />
                <Route path="/contact" component={Contact} />
                <Route component={ErrorPage} />
              </Switch>
          </div>
        );
      }

    然鹅,可能你发现 this.props为{} 空对象
    那可能是因为你没有使用withRouter关联组件,关联一下就好了。注意一点,app.js无法关联,withrouter只能关联路由组件或者app.js的子组件

    import React, { Component } from "react";import {withRouter } from "react-router";class routers extends Component {
     /**
      * 生命周期函数
      */
     // 组件挂载
     componentDidMount() {
       console.log(this.props.location);
     }
     render() {
       return (
         <div key={this.props.location.key}>
         </div>
       );
     }}export default withRouter(routers);
    推荐学习:《react视频教程

    以上就是react路由跳转不刷新怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:路由 React
    上一篇:react改变数组页面没有刷新怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react怎么给树增加节点• react native reload 没有变化怎么办• react 安装插件就报错怎么办• react改变数组页面没有刷新怎么办
    1/1

    PHP中文网