react 回退至上一页并刷新数据

1 起因+思考过程

想着做一个能从页面A跳转到登录页面，登录成功再跳转回页面A的功能。因此个人思路是登录后回到上一个页面并刷新数据。网上有搜索出来大部分都是用useHistory，由于个人不太想回退react-router-dom(6.16.0)的版本。因此尝试除了useHistory之外的一些方法。

1.1 回退+刷新 放同一箭头函数中

这个能够回退到上一个界面，但是没有刷新内容，因此被弃掉。而且类似这样的代码：

function Login(){
    const checkThenBackRefresh = () =>{
        //...登录处理代码
        window.history.back();
        //...刷新代码
    }
    //...仅显示调用代码
    return(
        <div>
            <button htmlType="submit" onClick={checkThenBackRefresh}>
                SEND
            </button>
        </div>
    )
}

实际上在执行完window.history.back后，此时已经跳转到其他URL了，并不会执行后续刷新部分的代码。此时的刷新代码等效于在一个函数return后的代码。

1.2 登录仅放回退功能，刷新放在URL对应代码

直接把回退+刷新放在一个箭头函数(eg: const xxx = () => {...})中并不可取，因此考虑分开放。

function Login(){
    const checkThenBack = () =>{
        //...登录处理代码
        window.history.back();
    }
    //...仅显示调用代码
    return(
        <div>
            <button htmlType="submit" onClick={checkThenBack}>
                SEND
            </button>
        </div>
    )
}

// 页面A放刷新代码
function Test(){
    useEffect(() => {
        window.location.reload();
    }, [location.pathname]);

    return(
        //...详细代码省略
    )
}

如果直接用window.location.reload，会刷新整个页面并重新加载所有的JavaScript和CSS文件，尽管输出的pathname相同，网页还是会一直在刷新，因此该方法也不可行。

1.3 跳转前处理，为回退做准备

有搜到过history.push('/path');和history.goBack();，因此在想是否也能做类似处理。此种方案下可能不需要额外刷新内容，在回退到指定路径下，组件重新渲染，useEffect重新获取数据。

2 解决方案

有了1.3的前提下，编写代码并测试无误后，得到如下内容：

//utils.js
export function toLogin(navigate) {
    navigate('/login')
}

// 页面A
import { useNavigate } from "react-router-dom";
import { toLogin } from './utils.js';

function Test(){
    const navigate = useNavigate()

    return(
        <div>
            <h4>
                请先<a onClick={() => toLogin(navigate)}>登录</a>
            </h4>
        </div>
    )
}

// 登录页面
import { useNavigate } from "react-router-dom";

function Login(){
    const navigate = useNavigate();
    const checkThenBack = () =>{
        //...登录处理代码
        navigate(-1);
    }

    //...仅显示调用代码
    return(
        <div>
            <button htmlType="submit" onClick={checkThenBack}>
                SEND
            </button>
        </div>
    )
}

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import React, { Component } from 'react';
import Test from './Test.js';
import Login from './Login.js';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path='/' element={<Test/>} />
          <Route path='/login' element={<Login />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 代码的层级结构如下：