How to work with anchors at Reacjs

Question

I would like to call an id inside my html page

Type:

<a href="#meuid">Meu id </a>
<section id="meuid>
   Meu Id
</section>

No React

I’m trying like this:

header js.

    import { HashLink as Link} from 'react-router-hash-link'
    
    const Header = () => {
      return (
            <header id="header" className="header-transparent">
                <div className="container">
    
                    <div id="logo" className="pull-left">
                        <Link to="">
                            <img src="assets/img/logo.png" alt="" />
                        </Link>
                    </div>
                
    
                    <nav id="nav-menu-container">
                        <ul className="nav-menu">
                            <li className="menu-active"><Link smooth to="/">Home</Link></li>
                            <li><Link smooth to="/home#about">About Us</Link></li>
                            <li><Link smooth to="#services">Services</Link></li>
                            <li><Link smooth to="#portfolio">Portfolio</Link></li>
                            <li><Link smooth to="#team">Team</Link></li>                       
                            <li><Link smooth to="#contact">Contact Us</Link></li>
                        </ul>
                    </nav>
                </div>
            </header>
        )
    }

export default Header

home js.

import Header from '../../components/header';


const Home = () => {
    return (
        <div >
            <Header />
        
            <section id="hero">
                <div className="hero-container" data-aos="zoom-in" data-aos-delay="100">
                    <h1>Welcome to Regna</h1>
                    <h2>We are team of talented designers making websites with Bootstrap</h2>
                    <Link smooth to="#about" className="btn-get-started">Get Started</Link>
                </div>
            </section>

            <main>
               <section id="about">
                  <div className="container" data-aos="fade-up">
                      amount
                  </div>
                </section>



                <section id="services">
                    services
                </section>

        </div>
        );
    }
    
export default Home;

But the only place that works the anchor is the <section id="hero"> and the Header component does not work

How do I solve?

Answer 1

Adventist speaking!

Dude, Link on Reactjs has this property, but I’ve never set it up, since it’s designed just for you to navigate inside your app. But you can take a look at Docs (https://reactrouter.com/web/api/Link) that there shows how to put an anchor in the tag <Link />

If you choose to use <a /> you have to trade the Link for a <a></a> case wanted that effect of scrying.

I reproduced your code here and it worked, follow the example:

// import { HashLink as Link } from 'react-router-hash-link'

const Header = () => {
  return (
    <header id="header" className="header-transparent">
      <div className="container">

        <div id="logo" className="pull-left">
          <a href="/">
            <img src="assets/img/logo.png" alt="" />
          </a>
        </div>


        <nav id="nav-menu-container">
          <ul className="nav-menu">            
            <li><a href="#about">ABOUT</a></li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

Here I only did a snipe at the tag so I could put it down so I could see the effect of the scrool being done!

import Header from './Header';


const Home = () => {
  return (
    <div>
      <Header />

      <section id="hero">
        <div className="hero-container" data-aos="zoom-in" data-aos-delay="100">
          <h1>Welcome to Regna</h1>
          <h2>We are team of talented designers making websites with Bootstrap</h2>
          <a href="#about" className="btn-get-started">Get Started</a>
        </div>
      </section>

      <main style={{ position: "relative", top: "1000px" }}>
        <section id="about" >
          <div className="container" data-aos="fade-up">
            amount
          </div>
        </section>



        <section id="services">
          services
        </section>
      </main>

    </div>
  );
}

But anyway, I hope it helped you! And I also hope you can find a way to do with the <Link /> react.