如何将React导航栏中的Play Now按钮居中并设置跳转链接？

一、让「Play Now」按钮居中 #

你用的是Bootstrap navbar，核心是利用flex布局调整按钮位置，以下是两种可靠方案：

方案1：利用Bootstrap内置类（推荐，符合框架规范） #

修改Navbar组件中按钮的结构，给按钮套一个占满中间空间的flex容器，自动居中：

// 替换原按钮代码
<div className="d-flex justify-content-center flex-grow-1">
  <Link to="/metamask" className="play-now btn btn-secondary btn-md">Play Now</Link>
</div>

原理：flex-grow-1让这个容器占据导航栏中品牌和右侧菜单之间的所有剩余空间，justify-content-center让容器内的按钮水平居中。

方案2：自定义CSS（适合需要更精细控制的场景） #

先给导航栏容器添加相对定位，再给按钮设置绝对定位居中：

/* 在Navbar.css中添加 */
.navbartop {
  position: relative;
}

.play-now {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

注意：这种方式要确保按钮不会和其他元素重叠，响应式场景下可能需要额外添加媒体查询调整。

二、跳转至其他页面的最优实现 #

React Router中**Link组件是客户端路由跳转的最优方案**，相比手动用useNavigate绑定点击事件，它更简洁、符合声明式编程思想，且支持React Router的所有特性（比如路由预加载、active状态自动管理）。

修改步骤： #

1. 移除无用的useNavigate和clickHandle函数
2. 将原<button>替换为<Link>组件，保留Bootstrap的按钮样式类即可：

// 替换原按钮代码（结合居中方案1）
<div className="d-flex justify-content-center flex-grow-1">
  <Link to="/metamask" className="play-now btn btn-secondary btn-md">Play Now</Link>
</div>

完整修改后的Navbar组件代码 #

import React from 'react'
import "./css/Navbar.css"
import { Link } from 'react-router-dom'
import Metamask from "./Metamask"

function Navbar() {
  return (
    <nav className="navbartop navbar navbar-expand-lg bg-dark">
      <div className="container-fluid">
        <Link className="navbarlabel navbar-brand " to="#">Souls</Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          Nav Bar
          <span className="navbar-toggler-icon navbar-dark"></span>
        </button>
        {/* 居中的Play Now按钮 */}
        <div className="d-flex justify-content-center flex-grow-1">
          <Link to="/metamask" className="play-now btn btn-secondary btn-md">Play Now</Link>
        </div>    
        <div className="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul className="navbar-list navbar-nav ">
            <li className="nav-item " >
              <Link to="/" className="nav-link-item nav-link " aria-current="page">Home </Link>
            </li>
            <li className="navbar-list nav-item">
              <Link to="/whitepaper" className="nav-link-item nav-link">Whitepaper </Link>
            </li>
            <li className="navbar-list nav-item">
              <Link to="/faq" className="nav-link-item nav-link">FAQ </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default Navbar

（注：顺便修正了代码中class改为className的React规范问题，避免潜在渲染bug）

内容的提问来源于stack exchange，提问作者Gustavo Payano