无构造函数的React页面如何获取props实现无刷新跳转

嘿，我完全懂你的需求——要在那种没导入React、也没法直接拿到props的函数里，实现无刷新、保留应用状态和props的页面跳转，对吧？别担心，这在React Router的生态里有好几种靠谱的解决方案，给你一一拆解：

如果你的页面本质是React函数组件（哪怕现在没显式导入React，新版React已经支持自动导入了），直接用React Router v6的useNavigate钩子就搞定了：

// 先导入useNavigate（必须的）
import { useNavigate } from 'react-router-dom';

function YourPage() {
  // 初始化导航函数
  const navigate = useNavigate();

  function call() {
    // 执行跳转，完全无刷新，状态全保留
    navigate('/pageName');
    
    // 如果需要给目标页面传数据，还可以加state参数
    // navigate('/pageName', { state: { userInfo: { id: 123 } } });
  }

  return <div>你的页面内容</div>;
}

之后在目标页面，你可以用useLocation钩子拿到传递的state，完全不影响应用状态。

要是你的页面是类组件，之前没通过withRouter包裹导致拿不到history/router props，那就用高阶组件withRouter来增强组件：

import React from 'react';
import { withRouter } from 'react-router-dom'; // 注意：React Router v6中withRouter已被移除，可改用方案3

class ReactPage extends React.Component {
  call = () => {
    // 现在就能通过props拿到history来跳转了
    this.props.history.push('/pageName');
  }

  render() {
    return <button onClick={this.call}>点击跳转</button>;
  }
}

// 关键一步：用withRouter包裹组件，注入router相关props
export default withRouter(ReactPage);

要是你的call函数是完全独立的工具函数，不在任何组件内部，那可以创建一个全局的history实例，在整个应用里复用：

1. 先新建一个history.js文件：

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

2. 在你的路由根组件里，用这个自定义的history实例：

import { Router } from 'react-router-dom';
import history from './history';

function App() {
  return (
    <Router history={history}>
      {/* 你的所有路由配置都放在这里 */}
    </Router>
  );
}

3. 最后在你的独立函数里导入并使用：

import history from './history';

function call() {
  // 直接用全局history跳转，无刷新、状态全保留
  history.push('/pageName');
  // 同样可以传state：history.push('/pageName', { data: 'hello' });
}

你提到的原生JS跳转（比如window.location.href = '/pageName'）会触发整个页面的刷新，相当于重启了React应用，自然会丢失所有内存里的状态和props。而上面这些基于React Router的方案，都是在客户端通过更新组件树来实现页面切换，完全不会刷新页面，所以能完美保留应用状态。

内容的提问来源于stack exchange，提问作者Alex