-1

So I have a single page where I want to click a button that scrolls to a specific part of the page. I am using react router and when I click on the button it just replaces the section I want with the first page. Anyone knows why is it doing that? My code is located below:


    const [scrollNav, setScrollNav] = React.useState(false)

    return (
        <>
             <Nav>
          <NavbarContainer>

<Router>
           <NavMenu>

                   <NavLinks  
                   > About </NavLinks>
          
                   <Link to="/Experience" 
                   >Experience</Link>
                  
                   <NavLinks>Resume</NavLinks>
                  
                   <NavLinks to="/Contact" > Contact</NavLinks>

                   <Switch>
         <Router path='/Experience'>
           <Experience/>
           </Router>
           

       </Switch>

                   
         
            </NavMenu>
            </Router>

            <MobileIcon onClick = {toggle}>

               <FaBars/>
           </MobileIcon>
          </NavbarContainer>
       
         
          </Nav>
        </>
    )
}

export default Navbar;```
compilerDude
  • 11
  • 2
  • What button are you referring to? There isn't one in your snippet. You also have a Router` within a `Router`, you only need one (Perhaps the inner one was supposed to be a `Route` component since it has a `path` prop. Please include a [Minimal, ***Complete***, and Reproducible](https://stackoverflow.com/help/minimal-reproducible-example) code example. – Drew Reese Jan 06 '21 at 08:47

1 Answers1

0

Try like this

<Link to='/#Experience'></Link>

and don't forget to give the Experience id to your component where you want to navigate.

<div id={'Experience'}>Content</div>

just a tip, you should use lowercase values for urls and ids whenever possible.

Hemant
  • 1,127
  • 1
  • 10
  • 18