Can you use React smooth scroll and React Router Links in the same website?

1
votes

So I originally created a website with smooth scroll whenever I click my nav menu items, but now I want my buttons to link to additional pages to display more info.

My issue is for my styled components, I had to import link from react scroll to ensure they work, but now this conflicts with my nav button that I am trying to link with react router

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

I want my nav links to have react scroll

 export const NavLinks = styled(Link)``

But I want my button in the nav which is inside another div to use react-router

 export const NavBtnLink = styled(Link)``

Is that normal for websites to have smooth scroll and link to different pages? Or is smooth scroll meant only for one page static sites?

I don't get how I could have a signup button on a smooth scroll site if I can't link to a different page aka route

Code below

React Router not switching pages

React-scroll home nav link

           <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>

My App.js

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

My signup.js inside of my pages folder

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

    export default SignUpa;

This is my home page that shows my entire site and the sections my react-scroll navigates to

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

The HeroSection has the id="home" so it can scroll to that part, but I think that might be an issue now cause if I navigate to another page, idk how it will be able to take me back to the home page '/'

  <HeroContainer id='home'>
1
reactjsreact-router

1 Answers

2
votes

You can achieve this using alias name for import

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

Then you can you accordingly the new alias name where you need!