如何通过React Router跳转到携带错误信息与堆栈跟踪的顶级错误页面

这个问题我之前做项目的时候也踩过坑！React Router的<Redirect>确实没法直接传递自定义props，而且每个组件单独写错误处理也太繁琐了，完全没法实现统一的顶级错误页面效果。这里给你几个实用的解决方案，从官方推荐的到灵活适配你现有代码的都有：

方案1：用React错误边界（Error Boundary）统一捕获错误（官方推荐） #

错误边界是React专门设计用来捕获子组件树中抛出的错误，并展示备用UI的组件，这是处理组件内错误最优雅的方式，不用在每个组件里重复写try/catch。

步骤： #

1. 创建一个错误边界组件，它会自动捕获子组件的错误，然后跳转到错误页面并传递错误信息
2. 用这个错误边界包裹你的整个路由/应用组件树
3. 修改错误页面组件，从路由状态中获取错误详情

错误边界组件代码：

import React from 'react';
import { Redirect } from 'react-router-dom';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  // 捕获错误并更新状态
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // 可选：在这里可以把错误上报到日志服务（比如Sentry）
  componentDidCatch(error, errorInfo) {
    console.error("Uncaught error in component tree:", error, errorInfo);
  }

  render() {
    const { hasError, error } = this.state;
    const { children } = this.props;

    if (hasError) {
      // 跳转到错误页面，通过路由state传递错误信息
      return <Redirect to={{ pathname: "/error", state: { error } }} />;
    }

    return children;
  }
}

export default ErrorBoundary;

包裹应用路由：

import { Switch, Route } from 'react-router-dom';
import ErrorBoundary from './ErrorBoundary';
import Error from './Error';
import Home from './Home';
import OtherComponent from './OtherComponent';

function App() {
  return (
    <ErrorBoundary>
      <Switch>
        <Route path="/error" component={Error} />
        <Route path="/other" component={OtherComponent} />
        <Route path="/" component={Home} />
      </Switch>
    </ErrorBoundary>
  );
}

修改Error组件获取错误信息：

import { useLocation } from 'react-router-dom';

export default function Error() {
  const location = useLocation();
  // 用可选链避免undefined报错
  const error = location.state?.error || {};

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Oops! Something went wrong</h1>
      <div>
        <strong>Message:</strong> {error.message || "Unknown error"}
        <br />
        <strong>Stack Trace:</strong>
        <pre style={{ whiteSpace: 'pre-wrap', marginTop: '0.5rem' }}>
          {error.stack || "No stack trace available"}
        </pre>
      </div>
    </div>
  );
}

这个方案的核心优势是一劳永逸，所有子组件的错误都会被自动捕获，不用在每个组件里写错误处理逻辑。

方案2：在Redirect时通过location.state传递错误（适配你现有代码） #

如果你暂时不想重构代码，只想快速修复当前的问题，可以把<Redirect>的to属性改成对象形式，通过state字段传递错误信息：

修改你的业务组件代码： #

import { useState } from 'react';
import { Redirect } from 'react-router-dom';

function YourComponent() {
  const [error, setError] = useState({});

  const someComponentFetch = async () => {
    const url = '/myapp/data';
    try {
      // 你的请求逻辑
    } catch (error) {
      setError(error);
    }
  };

  // 跳转时把错误存在路由state里
  if (error.message) {
    return <Redirect to={{ pathname: "/error", state: { error } }} />;
  }

  return <div>Your normal component UI</div>;
}

然后同样用方案1里修改后的Error组件，通过useLocation获取state里的错误信息即可。

这个方案的缺点是需要在每个可能出错的组件里都写try/catch和跳转逻辑，适合小规模应用或者特定场景。

方案3：用Context API存储全局错误状态（适合大型应用） #

如果你的应用比较复杂，需要在多个地方访问或修改错误状态，可以用React的Context API来管理全局错误：

创建ErrorContext： #

import React, { createContext, useContext, useState } from 'react';

const ErrorContext = createContext();

export function ErrorProvider({ children }) {
  const [globalError, setGlobalError] = useState(null);

  // 统一的设置错误方法
  const setError = (error) => {
    setGlobalError(error);
  };

  return (
    <ErrorContext.Provider value={{ globalError, setError }}>
      {children}
    </ErrorContext.Provider>
  );
}

// 自定义hook方便使用
export function useError() {
  return useContext(ErrorContext);
}

在App中包裹Provider并处理跳转： #

import { Switch, Route, Redirect } from 'react-router-dom';
import { ErrorProvider, useError } from './ErrorContext';
import Error from './Error';
import Home from './Home';

function AppContent() {
  const { globalError } = useError();

  return (
    <>
      <Switch>
        <Route path="/error" component={Error} />
        <Route path="/" component={Home} />
      </Switch>
      {/* 如果有全局错误，自动跳转到错误页面 */}
      {globalError && <Redirect to="/error" />}
    </>
  );
}

function App() {
  return (
    <ErrorProvider>
      <AppContent />
    </ErrorProvider>
  );
}

在业务组件中设置错误： #

import { useError } from './ErrorContext';

function YourComponent() {
  const { setError } = useError();

  const someComponentFetch = async () => {
    const url = '/myapp/data';
    try {
      // 你的请求逻辑
    } catch (error) {
      setError(error);
    }
  };

  return <div>Your normal component UI</div>;
}

修改Error组件从Context获取错误： #

import { useError } from './ErrorContext';

export default function Error() {
  const { globalError } = useError();
  const error = globalError || {};

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Oops! Something went wrong</h1>
      <div>
        <strong>Message:</strong> {error.message || "Unknown error"}
        <br />
        <strong>Stack Trace:</strong>
        <pre style={{ whiteSpace: 'pre-wrap', marginTop: '0.5rem' }}>
          {error.stack || "No stack trace available"}
        </pre>
      </div>
    </div>
  );
}

这个方案适合大型应用，错误状态全局可访问，能灵活控制错误处理逻辑。

总结推荐： #

• 优先选方案1（错误边界），符合React官方错误处理规范，能统一捕获所有组件错误，代码最简洁。
• 如果只是临时修复现有代码，用**方案2（location.state）**最快。
• 大型复杂应用可以考虑方案3（Context API）。

内容的提问来源于stack exchange，提问作者gene b.