要在React应用中实现表单提交后的重定向,可以使用React Router库。下面是一个示例解决方法:
首先,安装React Router:
npm install react-router-dom
然后,在你的应用中导入所需的组件和方法:
import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, Link, useHistory } from 'react-router-dom';
接下来,创建一个表单组件:
const Form = () => {
const [submitted, setSubmitted] = useState(false);
const history = useHistory();
const handleSubmit = (event) => {
event.preventDefault();
// 处理表单提交逻辑
// ...
// 设置提交状态为true并重定向到目标页面
setSubmitted(true);
history.push('/target');
};
return (
);
};
在上面的示例中,我们使用了useState
钩子来跟踪表单是否已提交,并使用useHistory
钩子来获取路由历史对象,以便在提交后进行重定向。
最后,在你的应用中使用React Router来管理路由:
const App = () => {
return (
{/* 如果表单已提交,则重定向到目标页面 */}
{submitted ? : null}
);
};
在上面的示例中,我们在/target
路径上使用了一个Redirect
组件来实现重定向。如果表单已提交,用户将被重定向到/target
路径。
这就是使用React Router在表单提交后实现重定向的基本示例。根据你的具体需求,你可能需要对示例代码进行修改。