Question 206820 in Reactjs Question posted in
The new location for the React Documentation can be found here.

button color change to indicate visitor is on current page in reactJS

I’m currently trying to make the button to change background color to let the visitor know which page they are currently on. Anyone know how to do that? I’ve only managed to make it change color upon clicking.
I’m using react router in reactJS and for example i have 2 buttons, home and about, if im on home, the button colour will be blue, while the about button colour will be orange, and same goes otherwise, if im on about page, then the button will be blue and the home button will be orange.
but currently i can only manage the change color on click

    const [btnClass, setBtnClass] = useState('blue-color');

  function toggleColor() {
    if (btnClass === 'blue-color') {
        setBtnClass('orange-color');
    } else {
        setBtnClass('blue-color');
    }
}

  return (
    <div>
      <nav className="nav">
      <button
  onClick={() => {
    navigateHome();
    toggleColor();
  }}
  className={`${btnClass} po-btn`}>Home</button>
<button
  onClick={() => {
    navigateToAbout();
    toggleColor();
  }}
  className={`${btnClass} pr-btn`}>About</button>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </nav>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    if I am guessing right you want to show highlighted color when a user is on the About page for example what you can do is change the route url when the user go to the About page and get the current route details in useEffect with window.location.pathname to get the path and manipulate the color

    Login or Signup to reply.
  2. 0 
    import {useLocation} from 'react-router-dom'
import { Link } from 'react-router-dom'
import {
  Stack,
  Typography,
  Tabs,
  Tab
} from '@mui/material'

const LinkTab = props => {
  return (
    <Tab
      component={Link}
      onClick={event => {
        event.preventDefault()
      }}
      {...props}
    />
  )
}

const MenuButtons = props => {
  const location = useLocation()
  const [selectedIndex, setSelectedIndex] = useState(0)

  const handleItemClick = (event, index) => {
    setSelectedIndex(index)
  }

  useEffect(() => {
    const findCurrentPathname = () => {
      if (location.pathname === '/') {
        setSelectedIndex(0)
      }
      if (location.pathname === '/home') {
        setSelectedIndex(0)
      }
      if (location.pathname === '/about') {
        setSelectedIndex(1)
      }
    }
    findCurrentPathname()
  }, [selectedIndex, location]) 

  return ( 
   <React.Fragment>
      <Tabs
        value={selectedIndex}
        aria-label='nav tabs example'
        orientation='vertical'
        visibleScrollbar={false}
        TabIndicatorProps={{
          style: { display: 'none' }
        }}
        >
         <LinkTab
            label={
              <Stack
                direction='row'
                alignItems='center'
                alignSelf='flex-start'
                gap={1}
              >
                <Typography
                  variant='body1'
                >
                  Home
                </Typography>
              </Stack>
            }
            className='menuBtn'
            key='Home'
            to={'/'}
            onClick={e => handleItemClick(e, 0)}
          />  
         <LinkTab
            label={
              <Stack
                direction='row'
                alignItems='center'
                alignSelf='flex-start'
                gap={1}
              >
                <Typography
                  variant='body1'
                >
                  About
                </Typography>
              </Stack>
            }
            className='menuBtn'
            key='About'
            to={'/about'}
            onClick={e => handleItemClick(e, 1)}
          />
      </Tabs>
      <Routes>
        <Route path="/about" element={ < About /> } />
        <Route path="/" element={ < Home /> } />
      </Routes>
   </React.Fragment>
  )
 }
    /* Selected menu button color */
.menuBtn.Mui-selected {
  background: #1d5fff !important;
  color: #f9fdff !important;
}

/* Default menu button color */
.menuBtn {
  background: #f48225 !important;
  color: #fff !important;
}

    I would suggest to use MUI framework for the menu buttons combined with Link from react-route-dom.
    In useEffect you can check the location.pathname (through react-route-dom useLocation) and update the selectedIndex of the Tabs.
    Then, in the CSS, the menu items will change background colors based on the selectedIndex.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search