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

Posted 2023-03-15

【中文标题】Jumbotron 中的按钮链接到 React 导航栏中的按钮

【英文标题】：A button from Jumbotron link to a button from navigation bar in React

【发布时间】：2021-01-25 15:05:51

【问题描述】：

我在主页、关于、建模和资源中有导航。我想知道如何从 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

【问题讨论】：

您的代码沙箱正在显示 Hello CodeSandbox Start editing to see some magic happen! - 输出中未检测到 jumbotron

你能再试一次吗？

仍然没有输出@Sunny - 你在编辑正确的沙箱吗？我在看polished-cache-i4xzk

再试一次。现在可以使用了

你能帮我如何将jumbotron的按钮链接到导航栏关于，建模吗？

【参考方案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>

---

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

【讨论】：

还有一件事，你知道除首页外如何删除jumbotron吗？

注释掉或删除<Jumbo fluid className="jumbo"> 组件（包括它的子组件 - 组件的整个子树）

你能在codesandbox.io/s/3d-tool-zjm5m?file=/src/components/Modeling.js这里翻一下吗？在 Modeling.js 上，我想将其链接到一个名为 Upload.js 的新页面。在新页面 Upload.js 中，我只想显示没有 jumbotron 的导航栏“欢迎 3D 天文物体并开始，了解更多按钮”，并留给我显示其他内容的整个空间。如何在 Upload.js 页面中删除 jumbotron？

【参考方案2】：

尝试使用Link 代替按钮。

【讨论】：

你试过这样<Link to="/modeling">Get Started</Link>吗？

点击链接会发生什么？

浏览此链接以了解我的意思 codesandbox.io/s/polished-cache-i4xzk?file=/src/App.js，您能帮我弄清楚吗？

当我尝试访问沙箱时收到此错误。请求失败，状态码为 404。您删除了吗？

你使用链接了吗？