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

Question

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

Veno · Accepted Answer · 2020-10-01 13:26:54Z

2

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!

answered Oct 1, 2020 at 13:26

Veno

4453 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Johnxr Over a year ago

so I added that alias, but when I try to click on my button it just updates the URL, but the actual page does nothing

Johnxr Over a year ago

I tried to add some, but not sure if that helps or if you need more details. Also, I already had a nav menu item called signup, so I just had to change my new page to signupa so it doesn't conflict with path names

Veno Over a year ago

Did you added the route to Switch? Which is not rendering anything?

Johnxr Over a year ago

` <Switch> <Route path='/signupa' component={SignUpa} /> </Switch>` I did this to test the component to see if something changes,but it didn't do anything

Veno Over a year ago

For to="home", can you try adding "/home" and where did you configured to display the Home on this route?

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related