div 元素上的 href 属性在 React 挂钩中不起作用

Question

我正在尝试使用 React Hooks 制作一个绝命毒师角色信息应用程序。我希望它在我单击角色卡时转到新选项卡并搜索角色。但是当我点击它时，任何事情都会发生。这是我的卡片组件：

const CardCharacter = ({ character }) => {
    var googleSearch = "https://www.google.com/search?q=" + `${character.name}`;
    return (

        <div className="card my-4" href={googleSearch} target="_blank">
            <div className="card-inner">
                <div className="card-front">
                    <img className="card-image" src={character.img} alt={character.name} />
                </div>
                <div className="card-back mt-3 px-1">
                    <h3 className="my-2">{character.name}</h3>
                    <p className="my-1"><strong className="text-title">Played By: </strong>{character.portrayed}</p>
                    <p className="my-1"><strong className="text-title">Nick Name: </strong>{character.nickname}</p>
                    <p className="my-1"><strong className="text-title">Occupation: </strong>{character.occupation}</p>
                    <p className="my-1"><strong className="text-title">Status: </strong>{character.status}</p>
                    <p className="my-1"><strong className="text-title">Birthday: </strong>{character.birthday}</p>
                </div>
            </div>
        </div>

    );
}
export default CardCharacter;

我用 Google React Developer Tool 检查它：

Answer 1

您需要使用 <a> 标签。

const CardCharacter = ({ character }) => {
        var googleSearch = "https://www.google.com/search?q=" + `${character.name}`;
        return (

        <a  href={googleSearch} target="_blank">
             <div className="card my-4">
            <div className="card-inner">
                <div className="card-front">
                    <img className="card-image" src={character.img} alt= 
                     {character.name} />
                </div>
                <div className="card-back mt-3 px-1">
                    <h3 className="my-2">{character.name}</h3>
                    <p className="my-1"><strong className="text-title">Played By: </strong>{character.portrayed}</p>
                    <p className="my-1"><strong className="text-title">Nick Name: </strong>{character.nickname}</p>
                    <p className="my-1"><strong className="text-title">Occupation: </strong>{character.occupation}</p>
                    <p className="my-1"><strong className="text-title">Status: </strong>{character.status}</p>
                    <p className="my-1"><strong className="text-title">Birthday: </strong>{character.birthday}</p>
                </div>
            </div>
        </div>
        </a>

    );
}
export default CardCharacter;

读这个：https://www.w3schools.com/tags/tag_a.asp

div 元素上的 href 属性在 React 挂钩中不起作用

href attribute on div elements doesn't work in React hooks

javascript

css

reactjs

jsx

href