使用反应钩子表单重定向到确认页面

如何解决使用反应钩子表单重定向到确认页面

我无法在提交表单时重定向到确认页面。有人可以帮我弄这个吗？ 这是我使用 react hook 表单库创建的表单。我是 react js 的新手.. 第一次尝试 react。已经在网上搜索过了 但没有找到任何东西。 提前致谢。

     date: yup.string().required(),amount: yup.number().positive().integer().required(),});

   export default function App(){
   
       const { register,handleSubmit,watch,formState: { errors } } =  useForm({ resolver: yupResolver(schema)});
       const onSubmit = data => {
         //this.props.history.push('/home')
         //alert(JSON.stringify(data));
         window.location.href = '/tranfser-confirmation?from=${from}';
         console.log(data);
       }
       const watchShowRecurring = watch("recurring",false); // you can supply default value as second argument
       const watchAllFields = watch(); // when pass nothing as argument,you are watching everything
       const watchFields = watch(["recurring","recurringType"]); // you can also target specific fields by their names
   
       const accountTo = [
         { value: 'A',name: 'A' },{ value: 'B',name: 'B' }            
       ];
   
       const payeeList = [
         { value: 'Payee1',name: 'Payee 1' },{ value: 'Payye 2',name: 'Payee 2' }            
       ];
   
       return(
           <div className='form-content-right'>
   
           <form onSubmit={handleSubmit(onSubmit)} className='form'>
           <h1>
             Get started with us today! Transfer amount to another account.
           </h1>
   
           <div className='form-inputs'>
           <label className='form-label'>From</label>
           <select className='form-input' name="from" {...register("from")}>
           {accountTo.map((e,key) => { return <option key={key} value={e.value}>{e.name}</option>; })}
           </select>
           {errors.from && <p>{'From is required'}</p>}
           </div>
   
           <div className='form-inputs'>
           <label className='form-label'>To (If Payee is not in the list,Please add payee)</label>
           <select className='form-input' name="to" {...register("to")}>
           {payeeList.map((e,key) => { return <option key={key} value={e.value}>{e.name}</option>; })}
           </select>
           {errors.to && <p>{'To is required'}</p>}
           </div>
   
           <div className='form-inputs'>
           <label className='form-label'>Amount</label>
           <input className='form-input' type="number" placeholder="amount" name="amount" {...register("amount",{ required: true })}/>
           {errors.amount && <p>{'Amount is not valid'}</p>}
           </div>
   
           <div className='form-inputs'>
           <label className='form-label'>Date</label>
           <input className='form-input' type="Date" placeholder="date" name="date" {...register("date",{ required: true })}/>
           {errors.date && <p>{'Date is required'}</p>}
           </div>
   
           <div className='form-inputs'>
             <input name="recurring" type="checkbox"  id="recurring" {...register("recurring")}/>
             <label for="recurring" className="form-label">Recurring</label>
           </div>
   
           {watchShowRecurring && (
             
           <div className='form-inputs'>
           <select className='form-input' name="recurringType" {...register("recurringType")}>
             <option value="Select">--Select--</option>
             <option value="Daily">Daily</option>
             <option value="Weekly">Weekly</option>
             <option value="Monthly">Monthly</option>
             <option value="Monthly">Yearly</option>
           </select>
           </div>
           )}
   
           <button className='form-input-btn' type='submit'>
             Continue
           </button>
           </form>
           </div>
       )
   }```

解决方法

参考：GIF with the url you are appending to redirect,Its working but I think maybe It cant find the route you are appending

• 在 JS 中使用模板字符串而不是 ' ' 因为它无法访问 data.from 值，它直接作为字符串传递。使用这个/tranfser-confirmation?from=${data.from}

• 数据对象的键为 from ，直接访问 from 不起作用，传递字符串而不是值会导致问题

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 你可以在这里阅读

• 重定向工作正常，因为如果我给 window.location.href = 'https://www.google.com/';

• 这是输出：added google url and it redirected properly

• 您可以检查您的反应应用程序中的路由，适当的字符串附加可能会有所帮助

• React Router 是一个很好的修复 SPA 路由的方法。因为它只加载组件，不刷新页面

• 您可以参考这里：https://reactrouter.com/web/guides/quick-start