Блог

Главная - Вопросы по программированию - Маршрутизация при отправке входных данных

Маршрутизация при отправке входных данных

#reactjs #react-router-dom

Вопрос:

Я хочу проложить маршрут по другому пути, когда нажата кнопка Сохранить пароль(не кнопка). Я понятия не имею, как это реализовать, так как я не хочу использовать ссылку.

Я использую этот компонент в своей основной функции(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

Ответ №1:

Вы можете использовать объект истории из react-маршрутизатора для перенаправления пользователя на другой маршрут с помощью history.push(path) . У них также есть крючок истории использования, который вы можете использовать, если предпочитаете использовать крючки в этой ситуации.

Надеюсь, это было полезно.

Комментарии:

1. Мне пришлось использовать крючок истории использования, чтобы он работал на меня. Спасибо 😀

Ответ №2:

Сначала вам нужно импортировать useHistory() крючок react-router-dom , а затем сделать это:

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

Удачи, дайте мне знать, если это сработает

Метки: