Блог

У меня есть навигация в Home, About, Modeling и Resources. Мне интересно, как можно добавить ссылку на кнопку из 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=»#моделирование», но страница не понимает, как перейти к моделированию страницы
Кто-нибудь может помочь? Я использую React

Чтобы быть точным, посмотрите на мой код по ссылке ниже: https://codesandbox.io/s/polished-cache-i4xzk?file=/src/App.js

У вашего jumbrotron есть проблема с CSS в отношении z-index . Ссылки внутри не могут взаимодействовать из-за отрицательного 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>
  

На данный момент я не совсем уверен, куда должна быть направлена ваша кнопка «Начать», но вы можете следовать той же концепции, которую я описал выше.

Попробуйте использовать ссылку вместо кнопки.