React-Router-Dom Link包裹自定义按钮后位置偏移问题求助及滚动条异常原因咨询

嘿，我来帮你搞定这两个头疼的问题！咱们一个个来解决：

一、Link包裹按钮后按钮右移的问题 #

问题根源 #

React Router 的 <Link> 组件默认是inline行内元素，当它包裹你设置了 position:absolute 的按钮时，会破坏原本的居中逻辑——因为行内元素的定位参考和块级元素不同，而且你的按钮原本的 margin:auto 居中在绝对定位下需要父元素是相对定位且有明确的边界，而默认的Link并不满足这个条件。

修复方案 #

我推荐用 styled-components 直接把 <Link> 改造成符合你布局需求的容器，这样既能保留路由跳转功能，又能让按钮保持居中：

1. 先创建一个 styled 版本的 Link：

const StyledLink = styled(Link)`
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 78%;
  /* 继承按钮的媒体查询 */
  @media (max-height: 601px){
    top: 83%;
  }
`

2. 修改你的按钮样式，移除原本的 top 属性（把定位权交给 StyledLink）：

const Button = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 178px;
  height: 48px;
  background: #161616;
  border-radius: 25px;
`

3. 最后替换原来的 Link 为 StyledLink：

<StyledLink to="/menu">
  <Button type="button">
    <ButtonText> Order Now! </ButtonText>
  </Button>
</StyledLink>

这样修改后，StyledLink 作为绝对定位的容器，通过 left:50% + transform:translateX(-50%) 实现水平居中，按钮在里面自然就会保持居中状态，不会再偏移到右侧啦。

二、滚动条异常出现的问题 #

问题根源 #

滚动条出现通常是因为页面总高度/宽度超出了视口范围，结合你的代码来看，可能有两个原因：

1. 浏览器默认的 body 有 margin（比如Chrome默认是8px），导致你的绝对定位元素（比如TopBar）超出视口，触发滚动条；
2. 你的页面元素没有设置固定的视口高度，某些绝对定位元素的 top 值加上自身高度超过了视口高度，撑开了页面。

修复方案 #

1. 重置全局样式：添加全局样式清除默认的margin和padding，并设置页面高度为视口高度：

// 在你的入口文件或者ProLandingPage里引入GlobalStyle
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body, html {
    height: 100vh;
    overflow: hidden;
  }
`

// 然后在组件里渲染GlobalStyle
export const ProLandingPage = () => {
  return (
    <>
      <GlobalStyle />
      <div>
        {/* 你的原有代码 */}
      </div>
    </>
  )
}

2. 检查Container组件：确保你的 <Container> 组件设置了 position:relative，这样所有绝对定位的子元素都会以它为参考点，不会超出视口范围：

// 如果Container是你自己写的styled组件，确保它有：
const Container = styled.div`
  position: relative;
  width: 100%;
  height: 100vh;
`

这样修改后，页面会被限制在视口高度内，不会出现不必要的滚动条，和你本地localhost的效果一致。

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