Блог

Итак, я изначально создал веб-сайт с плавной прокруткой всякий раз, когда я нажимаю на пункты навигационного меню, но теперь я хочу, чтобы мои кнопки ссылались на дополнительные страницы для отображения дополнительной информации.

Моя проблема связана с моими стилизованными компонентами, мне пришлось импортировать ссылку из react scroll, чтобы убедиться, что они работают, но теперь это конфликтует с моей навигационной кнопкой, которую я пытаюсь связать с react router

  import { Link } from 'react-scroll';
 import { Link } from 'react-router-dom';
  

Я хочу, чтобы мои навигационные ссылки имели прокрутку react

  export const NavLinks = styled(Link)``
  

Но я хочу, чтобы моя кнопка в навигаторе, которая находится внутри другого div, использовала react-router

  export const NavBtnLink = styled(Link)``
  

Нормально ли, что веб-сайты имеют плавную прокрутку и ссылаются на разные страницы? Или плавная прокрутка предназначена только для одностраничных статических сайтов?

Я не понимаю, как у меня может быть кнопка регистрации на сайте с плавной прокруткой, если я не могу перейти на другую страницу, известную как маршрут

Код ниже

React Router не переключает страницы

Ссылка React-scroll home nav

            <NavLinks
              to='home'
              smooth={true}
              duration={500}
              spy={true}
              exact='true'
              offset={-80}
            >
              Home
            </NavLinks>
  

React-router nav btn

 <NavBtnLink to='/signupa'>Sign In</NavBtnLink>
  

Мой App.js

   <Router>
  <Sidebar isOpen={isOpen} toggle={toggle} />
  <Navbar toggle={toggle} />
  <Home />
  <Switch>
    <Route path='/signupa' component={SignUpa} />
  </Switch>
  <Footer />
</Router>
  

Мой signup.js внутри папки «Мои страницы»

     function SignUpa() {
      return (
        <>
          <h1>Signupa page</h1>
        </>
      );
    }

    export default SignUpa;
  

Это моя домашняя страница, на которой отображается весь мой сайт и разделы, к которым переходит моя реакция прокрутки

     function Home() {
      return (
        <>
          <HeroSection />
          <InfoSection {...homeObjOne} />
          <InfoSection {...homeObjTwo} />
          <Services />
          <InfoSection {...homeObjThree} />
        </>
      );
    }
  

Раздел HeroSection имеет id =»home», поэтому он может прокручиваться до этой части, но я думаю, что теперь это может быть проблемой, потому что, если я перейду на другую страницу, idk, как он сможет вернуть меня на домашнюю страницу ‘/’

   <HeroContainer id='home'>
  

Вы можете добиться этого, используя псевдоним для импорта

 import { Link as Link1 } from 'react-scroll';
import { Link as Link2 } from 'react-router-dom';
  

Затем вы можете указать новое псевдонимное имя там, где вам нужно!