Предлагаемым методом: Это результат: Ссылка в кнопке, Код между строками комментариев

Мне было интересно, есть ли способ обернуть элемент Link из 'response-router' в тег HTML button с помощью response.

В настоящее время у меня есть компоненты Link для навигации по страницам в моем приложении, но я хотел бы сопоставить эту функциональность с моими кнопками HTML.

enter image description here enter image description here

Ответы (15)

Хотя это будет отображаться в веб-браузере, имейте в виду, что:
⚠️Вложение html кнопки в html a (или наоборот) недопустимый html ⚠️. Если вы хотите сохранить семантику HTML для программ чтения с экрана, используйте другой подход.

Сделайте оборачивание в обратном порядке и вы получите оригинальную кнопку с прикрепленной ссылкой. Никаких изменений CSS не требуется.

 
     
 

Здесь кнопка - это кнопка HTML. Это также применимо к компонентам, импортированным из сторонних библиотек, например Semantic-UI-React.

 import { Button } from 'semantic-ui-react'
 ... 
 
     
 

Почему бы просто не украсить тег ссылки тем же CSS, что и кнопку.

 
 Button1

Я рекомендую вам использовать компонент prop в компоненте Link. Используя это, вы можете эффективно заставить любой компонент вести себя как компонент a с точки зрения React Rotuer. Например, вы можете создать свой собственный компонент «Кнопка», а затем использовать его.


const MyButton = () => {
    return 
}

Potentially pass in text here

Если вы используете response-router-dom и material-ui, вы можете использовать ...

import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';


Подробнее здесь.

Для тех, кто ищет решение, использующее React 16.8 + (хуки) и React Router 5:

Вы можете изменить маршрут с помощью кнопки со следующим кодом:

React Router предоставляет некоторые свойства для ваших компонентов, включая функцию push () в history, которая работает почти так же, как путь элемент.

Вам не нужно заключать ваши компоненты в компонент более высокого порядка withRouter, чтобы получить доступ к этим свойствам.

Вы можете использовать useHistory hook, поскольку response-router v5.1.0.

Хук useHistory дает вам доступ к экземпляру истории, который вы можете использовать для навигации.

import React from 'react'
import { useHistory } from 'react-router-dom'

export default function SomeComponent() {
  const { push } = useHistory()
  ...
  
  ...
}

ПРИМЕЧАНИЕ: имейте в виду, что этот подход отвечает на вопрос, но недоступен, как говорит @ ziz194 в своем комментарии

это недоступно, так как кнопка не будет тегом и, следовательно, у нее нет поведения ссылки, такого как открытие ссылки на новой странице. Это также не оптимально для программ чтения с экрана.

Использование response-router-dom и функции

В реакции вы можете использовать response-router-dom, применив useHistory call ...

- Сначала

import { useHistory } from 'react-router-dom';

- Во-вторых Внутри вашей функции ... напишите функцию для обработки нажатия кнопки

const handleButtonClick = () => {
    history.push('/YourPageLink')
  }

- И наконец


LinkButton компонент - решение для React Router v4

Во-первых, примечание о многих других ответах на этот вопрос.

⚠️ Вложенность

Любой ответ здесь, который предлагает вложить html кнопку в React Router Компонент Link (или наоборот) будет отображаться в веб-браузере, но он не является семантическим, доступным , или действительный html:



Щелкните, чтобы проверить эту разметку с помощью validator.w3.org

Это может привести к проблемам с макетом / стилем, поскольку кнопки обычно не размещаются внутри ссылок.


Использование тега html

Если вам нужен только HTML кнопка тег…


... тогда вот правильный способ получить кнопку, которая работает как компонент Link в React Router ...

Используйте React Router withRouter HOC для передачи этих свойств вашему компоненту:

  • история
  • расположение
  • совпадение
  • staticContext

LinkButton компонент

Вот компонент LinkButton, который вы можете скопировать /макароны:

// файл: /components/LinkButton.jsx
импортировать React из 'React'
импортировать PropTypes из 'prop-types'
импортировать {withRouter} из 'response-router'

const LinkButton = (props) => {
  const {
    история
    место расположения,
    совпадение,
    staticContext,
    к,
    по щелчку,
    // ⬆ отфильтровываем реквизиты, которые `button` не знает, что делать.
    ...отдых
  } = реквизит
  возвращение (
    кнопка <
      {... rest} // `children` - это просто еще одна опора!
      onClick = {(событие) => {
        onClick && onClick (событие)
        history.push (в)
      }}
    />
  )
}

LinkButton.propTypes = {
  to: PropTypes.string.isRequired,
  дети: PropTypes.node.isRequired
}

экспорт по умолчанию withRouter (LinkButton)

Затем импортируйте компонент:

импортировать LinkButton из '/ components / LinkButton'

Используйте компонент:

 Нажимайте мои кнопки! 

Если вам нужен метод onClick:

 {
    console.log ('здесь настраиваемое событие!', событие)
  }}
> Нажимайте мои кнопки! 

Обновление: Если вы ищете другой интересный вариант, доступный после того, как было написано выше, проверьте этот хук useRouter.

Я использую Router и

С помощью стилизованных компонентов этого легко достичь

Сначала создайте стилизованную кнопку

import styled from "styled-components";
import {Link} from "react-router-dom";

const Button = styled.button`
  background: white;
  color:red;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid red;
  border-radius: 3px;
`
render(
    
);

проверьте стилизованный дом компонента подробнее

Обновление для React Router версии 6:

Различные ответы здесь похожи на временную шкалу эволюции реактивного маршрутизатора 🙂

Используя новейшие хуки от react-router v6, теперь это можно легко сделать с помощью useNavigate hook.

import { useNavigate } from 'react-router-dom'      

function MyLinkButton() {
  const navigate = useNavigate()
  return (
      
  );
}

Многие решения были сосредоточены на усложнении вещей.

Использование withRouter - действительно долгое решение для чего-то столь же простого, как кнопка, которая ссылается на другое место в Приложении.

Если вы собираетесь за S.P.A. (одностраничное приложение), самый простой ответ, который я нашел, - использовать с эквивалентным кнопке className.

Это гарантирует, что вы поддерживаете общее состояние / контекст без перезагрузки всего приложения, как это сделано с

import { NavLink } from 'react-router-dom'; // 14.6K (gzipped: 5.2 K)

// Where link.{something} is the imported data

    {link.label}


// Simplified version:

    Button without using withRouter

Пока я просматривал ответы, все говорили о старых версиях react-router-dom, так что это может быть полезным ответом для тех, кто хочет использовать хуки в функциональных компонентах. Поскольку в новой версии изменено несколько хуков, и даже withRouter не применим, вам нужно создать собственный HOC.

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

React-Router-Dom версия 6


это возможно только в функциональных компонентах, поскольку я использую хуки, если вы хотите использовать компоненты класса, вы можете сделать hoc.

import {Link, useNavigate} from 'react-router-dom';
function Home() {
you can pass your state like so:  navigate('/show',{state});
const toShowInfoPage=()=>{
navigate('/show');

  }


return(
<>


 /*you can use button as well or anything 
of your choice, but remember 
you have to pass the onClick event.
    */
 {toShowInfoPage()}} 
style={{textDecoration:'none',
paddingRight:'20px',
color:'#187bcd',
cursor:'pointer'}}>




)



}

Чтобы получить доступ к useNavigate () с компонентом класса, вы должны либо преобразовать его в функциональный компонент, либо свернуть свой собственный withRouter Компонент более высокого порядка, чтобы ввести «свойства маршрута», такие как withRouter HOC из response-router-dom v5.x сделал.


Это всего лишь общая идея. если вы хотите использовать Navigate Вот пример custom withRouter HOC:

const withRouter = WrappedComponent => props => {
  const params = useParams();
  // etc... other react-router-dom v6 hooks

  return (
    
  );
};

И украсить компонент новым HOC.

export default withRouter(Post);

Это добавит props для компонента класса.

2022 WebDevInsider