react-router-dom之 history+路由url更新页面不刷新的解决办法

相关文章推荐
愉快的黄豆 · sqlserver循环删除记录-掘金· 1 年前 ·
深情的西装 · https://mvnrepository. ...· 1 年前 ·
傻傻的吐司 · 群晖qBittorrent WebUI ...· 1 年前 ·
英姿勃勃的松鼠 · 汇编语言MUL指令：无符号数乘法· 2 年前 ·
稳重的企鹅 · Android播放audio音频踩坑实践 ...· 2 年前 ·
import




    
 { createBrowserHistory } from "history";
const history = createBrowserHistory();
export default class login extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  render() {
    // 表单通过校验提交
    const onFinish = values => {
      const { username, password } = values;
      if (username === "许许" && password === "2020") {
        console.log("校验成功");
        history.push("/home");
    return (
      <div className="login-page"></div>
注意： 如果遇到更新了路由url，但是不更新页面视图时：
原因有两种：
Switch会匹配第一个路由符合的组件，例如当前路由为’/test2‘，会匹配’/‘和’/test2’。所以一直都是显示Test组件。
解决方法：将根路由放在最下面或者增加exact属性。
在Router中已经将history进行了注入，所以子组件中直接使用props上的history即可完成路由跳转，加上之前已经配置好的路由就可以进行页面跳转：
      if (username === "许许" && password === "2020") {
        this.props.history.push("/home");
      } else {
        message.error("账号/密码错误，请重新输入");
复制代码
  
 
   相关推荐
   
        superZidan
        JavaScript
        React.js
      
    在 React Router 中使用 JWT
 本篇文章将探讨 JWT 身份校验与 React 和 React-router 的无缝集成。 我们还将学习如何处理公共路由、受校验保护路由，以及如何利用 axios 库通过身份验证令牌发出 API 请求
  13.4w
 
 
        superZidan
        ChatGPT
        React.js
      
    基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
 在本文中，你将学习如何使用 ChatGPT API 构建一个将 JSON 对象转换为 Typescript interface 的 Web 应用。 通过这个例子，你还可以创建功能更加强大的应用程序
  16.1w
 
 
        Nickyang
        React.js
      
    react-router v6 路由守卫最佳实践!
 前言 react-router 更新到v6版本应该有好一段时间了，但是v6自己也没真正去实践过，用过v5版本的都知道如果配置路由守卫、拦截等或者像vue那样的路由数组的话是很麻烦的，还要用到react
  7948
 
 
        CUGGZ
        JavaScript
        React.js
      
    React Router v6 完全指南
 React Router 是 React 生态系统中最受欢迎的第三方库之一，近一半的 React 项目中使用了 React Router，下面就来看看如何在 React 项目中使用 React Rou
  1.2w
 




    
 
        掘金·日新计划
      
    前端重新部署如何通知用户刷新网页？
 1.目标场景 有时候上完线，用户还停留在老的页面，用户不知道网页重新部署了，跳转页面的时候有时候js连接hash变了导致报错跳不过去，并且用户体验不到新功能。 2.思考解决方案 如何去解决这个问题 思
  10.9w
 
 
        大小姐驾到
        Nginx
      
    Nginx解决history模式下页面刷新404
 记录整理一下自己的线上项目，解决nginx配置问题，也就是《关于我的spa项目在部署到服务器上后因为history模式刷新导致404的这件事》
  6413
 
 
        React.js
      
    react-router v6 如何实现动态路由？
 最近在肝一个后台管理项目，用的是react18 + ts 路由用的是v6，当需要实现根据权限动态加载路由表时，遇到了不少问题。 v6相比于v5做了一系列改动，通过路由表进行映射就是一个很好的改变
  1.1w
 
 
      
    面试官为啥总是喜欢问前端路由实现方式？
 前端面试过程中被问到如何实现前端路由，我们应该从哪些方面回答。如果让你自己实现前端路由，你又该怎么做？
  11.1w
 
 
        我不是外星人
        React.js
        JavaScript
      
    「React 进阶」 React 全部 Hooks 使用大全 （包含 React v18 版本 ）
 介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法，查缺补漏，助你早日进阶 React !
  5.7w
 




    
 
        前端程序媛_西安
        Vue.js
      
    hash和history路由的区别 
 在了解路由模式前，我们先看下 什么是单页面应用，vue-router  的实现原理是怎样的，这样更容易理解路由。 SPA与前端路由 SPA（单页面应用，全程为：Single-page Web appl
  1.2w
 
 
        没有昵称请重新填写
        React.js
      
    React-Router@v6 源码解析（history路由）
 React-Router v6 Browser路由源码解析（history），不熟悉v6版本用法的建议先去看下相关使用
  1134
 
 
        李白爱喝水
        Vue.js
      
    Vue 了解前端路由 hash 与 history 差异
 深入了解前端路由 hash 与 history 差异 前言 没了解这两种路由前，不管是 vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番
  1.4w
 
 
        webfunny前端监控
        React.js
      
    浅谈react-router-dom V6的配置使用
 最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，
  5747
 
 
        ConardLi
        JavaScript
        React.js
      
    2022 年的 React 生态
 `React` 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 `React`，它的生态功不可没。
  10.6w
 
 
        JavaScript
      
    86张脑图，一口气看完 React 
 言简意赅地用86张思维导图🖼，总结 React相关知识点✔，且附原图和源文件📚，快来看看吧🤞~
  8.2w
 
 
    一个开发的许许
        前端工程师
      
   私信