React表单提交后路由跳转至Party组件但表单未消失求助

嘿，刚接触React遇到这种问题太正常啦，我来一步步帮你搞定~

你现在的核心问题是：提交表单后路径虽然切换到了/party，但表单还留在页面上和Party组件一起显示。这是因为表单没有被任何路由规则包裹，它和Party的Route是同级渲染的——不管路径怎么变，表单都会一直固定在页面里。

下面给你两种适合新手理解的解决办法：

方法一：给表单添加路由规则（React Router v5及以下版本） #

我们可以把表单放到Route组件里，让它只在默认路径（比如/）下显示，当路径切换到/party时，这个路由就不再生效，表单自然就消失了。

步骤1：修改Events组件的render方法 #

把表单用Route包裹，加上exact属性确保只有路径完全匹配时才渲染表单：

render() {
  return (
    <Router>
      <div>
        {/* 表单仅在路径为 "/" 时渲染 */}
        <Route exact path="/" render={() => (
          <form onSubmit={this.handleSubmit}>
            <h3> Create Event </h3>
            {this.createUser()}
            <div>
              <input type="button" value="add more" onClick={this.addClick.bind(this)} />
              <input type="submit" value="Submit" />
            </div>
          </form>
        )} />

        {/* Party组件在 "/party" 路径渲染 */}
        <Route path="/party" component={Party} />
        
        {/* 可选：保留这个Link，方便手动跳转测试 */}
        <Link to="/party">Party</Link>
      </div>
    </Router>
  );
}

步骤2：让表单提交后自动跳转 #

接下来修改handleSubmit方法，在表单处理完成后跳转到/party，还要记得阻止表单的默认提交行为（不然页面会刷新，丢失React的单页状态）：

handleSubmit = (e) => {
  e.preventDefault(); // 阻止页面刷新
  // 这里可以添加你的表单数据处理逻辑，比如保存到组件状态或后端
  // 处理完成后跳转到Party页面
  this.props.history.push('/party');
}

小提醒：如果拿不到history属性 #

如果你的Events组件没有自动获得history props，需要用withRouter高阶组件包裹它，这样就能拿到路由相关的属性了：

// 先导入withRouter
import { withRouter } from 'react-router-dom';

class Events extends Component {
  // 你的组件原有代码...
}

// 导出时用withRouter包裹组件
export default withRouter(Events);

方法二：React Router v6的写法（如果用的是新版本） #

如果你用的是React Router v6，语法会稍有不同，需要用<Routes>包裹所有路由，并且用element属性指定要渲染的组件：

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

// 可以把Events改成函数组件，用useNavigate钩子实现跳转
function Events() {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单数据的逻辑写在这里
    navigate('/party'); // 跳转至Party页面
  };

  const addClick = () => {
    // 你的addClick逻辑
  };

  const createUser = () => {
    // 你的createUser逻辑
  };

  return (
    <div>
      <Routes>
        <Route path="/" element={
          <form onSubmit={handleSubmit}>
            <h3> Create Event </h3>
            {createUser()}
            <div>
              <input type="button" value="add more" onClick={addClick} />
              <input type="submit" value="Submit" />
            </div>
          </form>
        } />
        <Route path="/party" element={<Party />} />
      </Routes>
      <Link to="/party">Party</Link>
    </div>
  );
}

这样修改后，提交表单后页面会跳转到/party，此时表单所在的路由不再匹配，就会自动消失，页面上只会显示Party组件啦~

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