Reactjs 提交输入时的路由

当按下“保存密码”按钮（不是按钮）时，我想转到另一个路径。我不知道如何实现这一点，因为我不想使用链接

我在我的主要功能（app.js）中使用了这个组件，但我认为我必须在这里实现路由，因为这里也是输入提交（保存密码）程序

代码：

import {Link, withRouter} from 'react-router-dom'

const AddPasswort = ({onChange}) => {
    const[password, setPassword] = useState('')
    const[repeatPW, setRepeatPW] = useState('')
   

   

    const onSubmit = (e) => {
        e.preventDefault();

        if(!passwort){
            alert('Please enter a new password')
            return
        
        }
        else if(passwort !== repeatPW) {
            alert('Your passwords do not match')
            return
        }
    
        onChange({passwort, repeatPW})
        
        setPassword('')
        setRepeatPW('')
    }

    return (
        <form className ='add-form' onSubmit={onSubmit} >
            <div className='form-control'>
                <label>Password</label>
                <input  type='password'
                        placeholder='Passwort...'
                        value={passwort} 
                        onChange={(e) => setPassword(e.target.value)}/>
            </div>
            <div className='form-control'>
                <label>Repeat Passwort</label>
                <input  type='password' 
                        placeholder='Repeat Password...' 
                        value={repeatPW} onChange={(e) => setRepeatPW(e.target.value)}/>
            </div>
            

            <input  type = 'submit' value = 'Save Password' className= 'btn btn-block'/>
    
        </form>
    )
}

export default withRouter(AddPasswort);```


  [1]: https://i.stack.imgur.com/70LzN.jpg
  [2]: https://i.stack.imgur.com/NX5Fn.jpg

从'react router dom'导入{Link，withRouter}
常量AddPasswort=（{onChange}）=>{
const[password，setPassword]=useState（“”）
const[repeatPW，setRepeatPW]=useState（“”）
const onSubmit=（e）=>{
e、 预防默认值（）；
如果（！passwort）{
警报（'请输入新密码'）
返回
}
else if（passwort！==repeatPW）{
警报（'您的密码不匹配'）
返回
}
onChange（{passwort，repeatPW}）
设置密码（“”）
setRepeatPW（“”）
}
返回(
密码
setPassword（e.target.value）}/>
重复羊草
setRepeatPW（e.target.value）}/>
)
}
使用路由器导出默认值（AddPasswort）```
[1]: https://i.stack.imgur.com/70LzN.jpg
[2]: https://i.stack.imgur.com/NX5Fn.jpg

您可以使用来自的对象，通过使用

历史记录。推送（路径）

将用户重定向到另一个路由。如果您愿意在这种情况下使用钩子，也可以使用钩子

---

希望这有帮助。

首先需要从

react router dom

导入

useHistory（）

hook，然后执行以下操作：

import {Link, withRouter} from 'react-router-dom'
const AddPasswort = ({onChange}) => {
    const[password, setPassword] = useState('')
    const[repeatPW, setRepeatPW] = useState('') 
    // create a history object 
    const history = useHistory()  
    const onSubmit = (e) => {
        e.preventDefault();

        if(!passwort){
            alert('Please enter a new password')
            return
        
        }
        else if(passwort !== repeatPW) {
            alert('Your passwords do not match')
            return
        }
    
        onChange({passwort, repeatPW})
        
        setPassword('')
        setRepeatPW('') 
        // navigate to where you want 
        history.push("/your_path")
    }

---

祝你好运，让我知道它是否有效。它对我有效：我必须使用useHistory钩子，这样它对我有效。谢谢：D