React18 SPA中提交表单后替换GlobalNav与Footer间组件的方法

我有一个React应用，初始渲染结构如下：

function App() {
  return (
    <>
    <GlobalNav />
      <Routes>
        <Route path="/" exact Component={Home} />
        <Route path="/contact" exact Component={Contact} />
      </Routes>
    <Footer />
    </>
  );
}

/* Home */
function Home (){
  return (
    <>
      <Hero />
      <Products />
      <Promo />
      <Testimonials />
      <Popular />
    </>
  )
}

etc....

GlobalNav组件内包含一个表单，提交该表单时，我希望移除GlobalNav与Footer之间渲染的现有组件，转而渲染新组件。原本最简便的方案是使用ReactDOM.render(<NewComponent />, document.getElementById(TARGET_DOM_NODE));，但该方法在React18中已不被推荐，请问如何用React18友好的方式实现这一需求？

方法一：状态驱动渲染切换 #

这是最贴合React设计思路的方案，用组件状态控制中间区域的渲染内容：

1. 在App组件里添加状态，标记是否要显示新组件
2. 把状态更新函数传给GlobalNav，表单提交时触发状态变更
3. 根据状态值，决定渲染原路由内容还是新组件

示例代码：

import { useState } from 'react';
import { Routes, Route } from 'react-router-dom';

function App() {
  const [showNewComponent, setShowNewComponent] = useState(false);

  const handleFormSubmit = () => {
    setShowNewComponent(true);
  };

  return (
    <>
      <GlobalNav onFormSubmit={handleFormSubmit} />
      {showNewComponent ? (
        <NewComponent />
      ) : (
        <Routes>
          <Route path="/" exact Component={Home} />
          <Route path="/contact" exact Component={Contact} />
        </Routes>
      )}
      <Footer />
    </>
  );
}

// 改造GlobalNav，表单提交时调用传入的回调
function GlobalNav({ onFormSubmit }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    // 做完表单逻辑后触发状态更新
    onFormSubmit();
  };

  return (
    <nav>
      {/* 其他导航内容 */}
      <form onSubmit={handleSubmit}>
        {/* 表单元素 */}
        <button type="submit">提交</button>
      </form>
    </nav>
  );
}

方法二：路由跳转实现页面切换 #

如果新组件适合作为独立页面，直接添加新路由，表单提交时跳转到该路由即可：

1. 在App的路由配置里添加新组件的路由规则
2. 在GlobalNav中用useNavigate钩子触发路由跳转

示例代码：

import { Routes, Route, useNavigate } from 'react-router-dom';

function App() {
  return (
    <>
      <GlobalNav />
      <Routes>
        <Route path="/" exact Component={Home} />
        <Route path="/contact" exact Component={Contact} />
        {/* 新增新组件的路由 */}
        <Route path="/new-content" Component={NewComponent} />
      </Routes>
      <Footer />
    </>
  );
}

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // 表单处理完成后跳转到新路由
    navigate('/new-content');
  };

  return (
    <nav>
      {/* 其他导航内容 */}
      <form onSubmit={handleSubmit}>
        {/* 表单元素 */}
        <button type="submit">提交</button>
      </form>
    </nav>
  );
}

方法三：React Portal（特殊场景） #

如果新组件需要挂载到DOM的其他节点，但还要保留React上下文关联，可以用Portal。不过这种方式更适合弹窗、模态框这类场景，单纯替换中间区域的话，前两种方法更合适：

import { useState, createPortal } from 'react';

function NewComponentPortal() {
  // 目标DOM节点，需要提前在HTML中定义
  const targetNode = document.getElementById('target-container');
  return createPortal(<NewComponent />, targetNode);
}

function App() {
  const [showNewComponent, setShowNewComponent] = useState(false);

  return (
    <>
      <GlobalNav onFormSubmit={() => setShowNewComponent(true)} />
      {showNewComponent ? (
        <NewComponentPortal />
      ) : (
        <Routes>
          <Route path="/" exact Component={Home} />
          <Route path="/contact" exact Component={Contact} />
        </Routes>
      )}
      <Footer />
    </>
  );
}

总结 #

优先选方法一，完全遵循React状态驱动的渲染逻辑，代码易维护；如果新组件是独立页面，方法二更符合路由设计习惯；Portal只在需要脱离当前DOM层级时使用。

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