React：表单提交后如何刷新页面并返回原路由？

1. 表单提交后刷新并保留当前路由 #

在add_category组件中，借助React Router的useNavigate钩子实现提交后刷新页面且停留在当前路由：

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

function AddCategory() {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 执行表单提交逻辑（如接口请求）
    try {
      // 替换为你的实际提交代码
      await fetch('/api/category', {
        method: 'POST',
        body: new FormData(e.target)
      });
      // 刷新当前页面并保留路由
      navigate(0);
    } catch (err) {
      console.error('提交失败:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入项 */}
      <input type="text" name="name" placeholder="分类名称" />
      <button type="submit">提交分类</button>
    </form>
  );
}

navigate(0)是React Router提供的方法，会触发页面刷新，同时保持当前的路由路径，完美满足提交后停留在/add_category的需求。

2. 确保路由结构正确配置 #

需要用嵌套路由实现左侧Tree+右侧内容的布局：

• 根路由(/)渲染包含Tree和Outlet的布局组件
• 子路由(/add_category、/edit_category)渲染对应的功能组件

import { Routes, Route, Outlet } from 'react-router-dom';
import Tree from './Tree';
import AddCategory from './AddCategory';
import EditCategory from './EditCategory';

// 布局组件：左侧Tree，右侧渲染子路由内容
function Layout() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <Tree />
      <div style={{ flex: 1 }}>
        <Outlet />
      </div>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        {/* 根路由默认显示提示 */}
        <Route index element={<div>请选择左侧树形节点</div>} />
        <Route path="add_category" element={<AddCategory />} />
        <Route path="edit_category" element={<EditCategory />} />
      </Route>
    </Routes>
  );
}

3. Tree组件的路由跳转逻辑 #

在Tree组件中，使用useNavigate实现点击节点跳转对应路由：

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

function Tree() {
  const navigate = useNavigate();

  return (
    <div style={{ width: '200px', borderRight: '1px solid #eee' }}>
      <div 
        onClick={() => navigate('/add_category')}
        style={{ padding: '10px', cursor: 'pointer' }}
      >
        添加分类
      </div>
      <div 
        onClick={() => navigate('/edit_category')}
        style={{ padding: '10px', cursor: 'pointer' }}
      >
        编辑分类
      </div>
    </div>
  );
}

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