提交输入时的路由答案

【问题标题】：Routing when an input is submitted提交输入时的路由
【发布时间】：2021-03-22 18:05:24
【问题描述】：

当点击保存密码按钮（不是按钮）时，我想路由到不同的路径。我不知道如何实现这一点，因为我不想使用链接。

我在我的主函数（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

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您可以使用react-router 中的history 对象通过history.push(path) 将用户重定向到另一个路由。如果您更喜欢在这种情况下使用钩子，也可以使用 useHistory 钩子。

希望这对您有所帮助。

【讨论】：

我不得不使用 useHistory 钩子，这样它才能为我工作。谢谢：D

【解决方案2】：

首先你需要从react-router-dom 导入useHistory() 钩子然后这样做：

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")
    }

祝你好运，让我知道它是否有效

【讨论】：