Блог

Главная - Вопросы по программированию - Реагируйте на подключение маршрутизатора с помощью

Реагируйте на подключение маршрутизатора с помощью

#javascript #reactjs #react-router #jsx

#javascript #reactjs #react-маршрутизатор #jsx

Вопрос:

Я использую маршрутизатор React. Я хочу, чтобы, когда пользователь нажимает на кнопку, он перенаправлял их на страницу (конечную точку) / форму, в которой есть компонент UserForm.

Вот мой код, обертывающий кнопку:

           <Router>
          <Link to="/form" className="updateLink">
              <button className="updateBtn" onClick={() => {
                  this.update(id);
                  console.log(`Item Number: ${id} Was Updated Successfully`);
                        window.alert(`Item Number: ${id} Was Updated Successfully`);
                    }}>U</button>
          </Link>
          <Switch>
             <Router exact path="/form" component={UserForm} />
          </Switch>
          </Router>

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

1. Кнопки не должны использоваться для навигации. Оформите якорь в виде кнопки, если хотите, но это неправильное использование элемента и проблема доступности.

2. @isherwood Мне любопытно, хотя я и согласен с вами, как вы справляетесь с этим, если вам приходится одновременно предпринимать действия и перемещаться? Я не знаю, как справиться с этим случаем без кнопки или чего-то подобного

3. Чего ожидает пользователь от происходящего? Совершенно очевидно, что навигация по странице формы является основной функцией элемента.

Ответ №1:

Таким образом, причина, по которой это не работает, заключается в том, что Кнопка имеет свой собственный обработчик кликов, отдельный от обработчика ссылок. У вас есть два доступных вам варианта:

  • Оформите тег ссылки так, чтобы он выглядел как кнопка, но на самом деле не был похож на кнопку (это не сработает, если вам нужно выполнить дополнительную логику в дополнение к маршрутизации).
  • На самом деле используйте кнопку. А затем используйте ‘useHistory’ React Hook, который предоставляет React Router, чтобы получить функциональность, которую вы ищете.

Компонент будет выглядеть примерно так:

 const history = useHistory()
return (
     <Button onClick={() => history.push("/abc")}/>

)

Я бы лично рекомендовал вам просто оформить тег ссылки так, как вам нужно. Поскольку это было бы более доступно и понятно пользователю. Но это хорошая идея, только если вы заботитесь только о маршрутизации.

Ответ №2:

Является ли приведенный выше код точным, как в вашем коде?

Оператор маршрутизатора должен быть настроен, как показано ниже, обычно в App.js

     <Router>
        <Switch>
        <Route path = './form' component = {form}
        </Switch>
    </Router>

Затем вы создаете компонент формы и для создания ссылки на него импортируете компонент ссылки в компонент, который вы хотите использовать.

Затем используйте, как показано ниже

     <Link to = './form'> Some Text </Link>

К проблеме с кнопкой, с которой вы столкнулись

Он будет отображаться, но вы не должны вставлять <a> <button> тег or в HTML, так как он не будет семантическим для программ чтения с экрана, недоступен и не является допустимым HTML.

Элемент Link в react создает и отображает <a> тег, который не должен быть вложен в кнопку.

Вы могли бы использовать useHistory в вашем случае для того же эффекта

     import React from 'react'
    import { useHistory } from 'react-router-dom'
    
    const component = () => {
      const { push } = useHistory()
      
    ...
    
    
      <button
        type="button"
        onClick={() => push('/form')}>
        Click me to go to a form!
      </button>
      ...
    }