перенос кнопки с ссылкой HTML в React

Question

Только начал изучать React. Что б закреплять навыки решил переделать макет сайта HTML на React. Возник вопрос: как можно переделать кнопку с ссылкой href на другой сайт? Нужно ли устанавливать для этого react-router-dom? Как сделать компонент кнопки я нашел, но вот про переходы на другой сайт не смог найти. По задумке, нужно будет в 5-ти кнопках указать 5 разных сайтов. Вот мой код, который работает HTML, но не работает React. Всем спасибо за помощь.

React (не переходит по ссылке)

<Button href="https://github.com/Peterblr?tab=repositories">
    wiew on github
</Button>

HTML (который нужно переделать на React)

<a href="https://github.com/Peterblr?tab=repositories"
className="u-btn u-btn-round u-button-style u-radius-24 u-btn-1">
    wiew on github
</a>

компонент Button

import React from 'react';
import classNames from "classnames";

const Button = ({ onClick, className, outline, children }) => {
    return (
        <button
            onClick={onClick}
            className={classNames("u-btn u-btn-round u-button-style u-radius-24 u-btn-1", className, {
                "button--outline": outline,
            })}
        >
            {children}
        </button>
    );
};

export default Button;

вот что в package.json

 {
  "name": "html-to-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "classnames": "^2.3.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

Answer 1

В общем не стал заморачиваться. Просто добавил ссылку a href=""

<Button>
  <a href="https://github.com/Peterblr/html-to-react"
     target={"_blank"}>
        View At Github
  </a>

Answer 2

Немного нелогично называть ссылку кнопкой. Если нужно перейти на другой сайт, просто используй ссылку. Если нужно, то можно стилизовать под кнопку.

Создаем переиспользуемый компонент Link.jsx:

import React from "react"
import "./styles.scss"

export const Link = (props) => {
  return (
    <a
      href={props.href}
      className="u-btn u-btn-round u-button-style u-radius-24 u-btn-1"
      target="_blank"
    >
      {props.children}
    </a>
  )
}

Используем компонент Link в App.jsx:

import React from "react" 
import {Link} from "./Link"

export const App = () => {
  return (
    <>
      <Link href="https://google.com">Google</Link>
      <Link href="https://yandex.ru">Yandex</Link>
    </>
  )
}

БЛОГ НА HUSL

перенос кнопки с ссылкой HTML в React

Ответы (2 шт):