Question 208461 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React navbar link ActiveClassName not working

I have a navbar with five nav links, but when clicked, it does not redirect to the link or position on the website.

This is my code for the header:

const Header = () => {
  const [active, setActive] = useState("nav_menu")
  const [icon, setIcon] = useState("nav_toggler")
  const navToggle = () => {
    if (active === "nav_menu") {
      setActive("nav_menu nav_active")
    } else setActive("nav_menu")

    if (icon === "nav_toggler") {
      setIcon("nav_toggler")
    } else setIcon("nav_toggler")
  }
  return (
    <>
      <header>
        <div className='headerContainer flexSB'>
          <div className='logo'>
            <img src='./images/my_logo.png' alt='' />
          </div>
          <nav>
            <ul className={active}>
              <li>
                <a href='/'>Home</a>
              </li>
              <li>
                <a href='/'>About</a>
              </li>
              <li>
                <a href='/'>Portfolio</a>
              </li>
              <li>
                <a href='/'>News</a>
              </li>
              <li>
                <a href='/'>Contact</a>
              </li>
              <button className='outline-btn'>BUY NOW</button>
            </ul>
          </nav>
          <div onClick={navToggle} className={icon}>
            <i className='fas fa-bars'></i>
          </div>
        </div>
      </header>
    </>
  )
}

export default Header

It just stays on the website and refreshes when I try to navigate through the links.
Can anyone help me with this?

Tags:

2

Answers


  1. 0

    Remove the anchor tags from your navigation menu.

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

<li>
    <Link to="/">Home</Link>
</li>
    Login or Signup to reply.
  2. 0

    if you wanna navigate page in reactjs , you need install react-router-dom .

    and you dont need tag in reactjs , after insstal react-router-dom

    use .

    this npm for react-router-dom :

    npm i react-router-dom

    react-router-dom doc :

    https://reactrouter.com/en/main

    sampel :

    in App.jsx first import :

    import { BrowserRouter, Route, Routes } from 'react-router-dom';

    then use them like this :

    function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Routes>
                    <Route element={<Home/>} path="/"></Route>
                    <Route element={<About />} path="/about"></Route>
                    <Route element={<Page404 />} path="*"></Route>
                </Routes>
            </BrowserRouter>
        </div>
    );
}

    in element set your component in path set your address you want be navigate

    if you want set home page address :

       <Route element={<Home/>} path="/"></Route>

    if you want create 404 page set this :

    <Route element={<Page404 />} path="*"></Route>

    in Header Componet :

    import Link :

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

<nav>
    <ul>
        <li>
         <Link to="/about">
         </Link>
        </li>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search