React Hooks结合React Router v4：如何实现路由重定向？

方法一：通过useContext获取Router上下文（适配React Router v4） #

React Router v4会将路由相关的history对象存入Context中，你可以用useContext钩子直接获取：

1. 导入相关依赖：

import React, { useContext } from 'react';
import { RouterContext } from 'react-router-dom';

2. 在待办列表组件内获取history并实现逻辑：

const TodoList = () => {
  const { history } = useContext(RouterContext);
  const { dispatch } = useContext(TodoContext); // 假设已定义TodoContext

  const editRow = (todo) => {
    // 1. 分发当前待办事项到Context
    dispatch({ type: 'SELECT_TODO', payload: todo });
    // 2. 跳转到待办详情路由
    history.push(`/todos/${todo.id}`);
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} onClick={() => editRow(todo)}>
          {todo.title}
        </li>
      ))}
    </ul>
  );
};

方法二：使用withRouter高阶组件（适配React Router v4） #

如果觉得直接操作Context不够直观，可以用withRouter包裹函数组件，它会把history、location、match作为props传入：

1. 导入withRouter：

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

2. 包裹组件并通过props获取history：

const TodoList = ({ history }) => {
  const { dispatch } = useContext(TodoContext);

  const editRow = (todo) => {
    dispatch({ type: 'SELECT_TODO', payload: todo });
    history.push(`/todos/${todo.id}`);
  };

  // 渲染待办列表逻辑...
};

// 用withRouter包裹组件后导出
export default withRouter(TodoList);

方法三：升级到React Router v5+，使用useHistory钩子（更简洁） #

如果项目没有强制停留在v4，升级到v5+后可以用官方提供的useHistory钩子，写法更简洁：

1. 导入useHistory：

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

2. 在组件内获取history并实现逻辑：

const TodoList = () => {
  const history = useHistory();
  const { dispatch } = useContext(TodoContext);

  const editRow = (todo) => {
    dispatch({ type: 'SELECT_TODO', payload: todo });
    history.push(`/todos/${todo.id}`);
  };

  // 渲染待办列表逻辑...
};

注意事项 #

• 确保你的组件被BrowserRouter（或其他Router组件）包裹在应用顶层，否则无法获取路由上下文。
• 状态分发和路由跳转的顺序可按需调整，建议先更新Context状态再跳转，保证进入详情页时状态已就绪。

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