Jumbotron 中的按钮链接到 React 导航栏中的按钮

Question

我在主页、关于、建模和资源中有导航。我想知道如何从 Jumbotron 添加指向我的导航按钮的链接。

在 App.js 中

function App() {
  return (
    <div className="App">
      <Header />  
      <Jumbotron />
      <Layout>
          <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/modeling" component={Modeling} />
          <Route path="/resources" component={Resources} />
          </Switch>
          </Layout>
    
    </div>
  );
}

在 Jumbotron.js 中

export const Jumbotron = () => (
  <Styles>
    <Jumbo fluid className="jumbo">
      <div className="overlay"></div>
      <Container className="center">
        <h1>Welcome 3D astronomical models</h1>
        <p>
        <button class="btn btn-success btn-lg btn-getStarted" href="#modeling" role="button">Get Started</button>
        <button class="btn btn-success btn-lg btn-getStarted" href="#about" role="button">Learn More</button>
        </p>
      </Container>
    </Jumbo>
  </Styles>
)

我使用 href="#modeling" 但页面不理解转到页面建模 任何人都可以帮忙吗？我正在使用反应

具体来说，请查看以下链接中的代码： https://codesandbox.io/s/polished-cache-i4xzk?file=/src/App.js

Answer 1

您的 jumbrotron 在 z-index 方面存在 CSS 问题。由于负数z-index，内部链接无法交互

.jumbo {
  background-size: cover;
  color: #efefef;
  height: 400px;
  position: relative;
  /* z-index: -2; <-- get rid of this */
  margin-left: 20px;
  margin-right: 20px;
}

关于“了解更多”按钮，您使用的是href，但您可以使用NavLink，因为您已经导入了它并且已经设置了客户端路由。

下面的代码应该可以解决它：

<NavLink to="/about"><button class="btn btn-success btn-lg btn-getStarted">Learn More</button></NavLink>

---

此时我不完全确定您的“开始”按钮应该指向哪里，但您可以遵循我上面描述的相同概念。

Answer 2

尝试使用Link 代替按钮。