0

Только начал изучать 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"
  },

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.