如何在React Router外部组件中实现页面重定向？

我懂你现在的困扰——Header组件放在了Router外面，没法直接拿到history对象来做表单提交后的重定向，对吧？别慌，这里有几个实用的解决方案，按推荐程度排序：

方案一：自定义独立的History对象（最推荐） #

这个方法能让你在应用的任何组件里（不管是不是在Router内部）都能轻松调用重定向，步骤也很简单：

1. 先安装history包（如果还没装的话）：

npm install history
# 或者用yarn
yarn add history

2. 在项目里新建一个history.js文件（比如放在src目录下），内容如下：

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

3. 回到你的App组件，导入这个自定义的history，然后传给Router组件：

import history from './history';
// ... 其他导入代码

class App extends React.Component {
  // ... 你的组件逻辑
  
  render() {
    return (
      <div>
        <Header order={this.order}/>
        {/* 把自定义的history传给Router */}
        <Router history={history} data={this.state.data}>
          <div>
            <Menu data={this.state.data}/>
            {/* 你的所有路由配置 */}
            <Route exact path="/" component={Home} />
            <Route exact path="/post" component={PostList} />
            {/* ... 其他路由 */}
          </div>
        </Router>
        <Map />
        <Footer />
      </div>
    )
  }
}

4. 最后在Header组件里，导入这个history对象，直接用它来做重定向：

import history from './history';

class Header extends React.Component {
  handleFormSubmit = () => {
    // 这里写你的表单提交逻辑...
    
    // 提交完成后重定向到首页
    history.push('/');
  }
  
  // ... 其他组件代码
}

这个方法的好处是不需要依赖组件层级，任何地方都能调用，完全符合SPA的行为，不会刷新页面。

方案二：用React Context传递History对象 #

如果你不想额外安装history包，也可以用React的Context API来把Router内部的history对象传递给外部的Header组件：

1. 先创建一个Context文件，比如src/HistoryContext.js：

import React from 'react';

export const HistoryContext = React.createContext();

2. 在App组件的Router内部，用一个Route来获取history，然后通过Context Provider传递出去：

import { HistoryContext } from './HistoryContext';
// ... 其他导入

class App extends React.Component {
  // ... 组件逻辑
  
  render() {
    return (
      <div>
        <Header order={this.order}/>
        <Router data={this.state.data}>
          {/* 用Route获取history，再通过Provider传递 */}
          <Route
            path="/"
            render={({ history }) => (
              <HistoryContext.Provider value={history}>
                <Menu data={this.state.data}/>
                {/* 你的所有路由 */}
                <Route exact path="/" component={Home} />
                {/* ... 其他路由 */}
              </HistoryContext.Provider>
            )}
          />
        </Router>
        <Map />
        <Footer />
      </div>
    )
  }
}

3. 在Header组件里，通过Context来获取history：
   如果是类组件：

import { HistoryContext } from './HistoryContext';

class Header extends React.Component {
  // 声明使用这个Context
  static contextType = HistoryContext;
  
  handleFormSubmit = () => {
    // 表单处理逻辑...
    this.context.push('/');
  }
  
  // ... 其他代码
}

如果是函数组件：

import { useContext } from 'react';
import { HistoryContext } from './HistoryContext';

function Header({ order }) {
  const history = useContext(HistoryContext);
  
  const handleFormSubmit = () => {
    // 表单处理逻辑...
    history.push('/');
  }
  
  // ... 其他代码
}

方案三：直接操作window.location（不推荐） #

这个方法是最简单的，但会导致页面硬刷新，破坏SPA的体验，只建议在紧急情况或者简单场景下使用：

handleFormSubmit = () => {
  // 表单处理逻辑...
  window.location.href = '/';
  // 或者用replace，不会留下历史记录
  // window.location.replace('/');
}

总结一下，最推荐的是方案一，自定义history对象，既灵活又符合React Router的设计理念。

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