Highlight bottom navbar button selection by default (React router)

Question

Good Day.

JS newbie here. I am trying to make my "Home" button highlighted the moment I launch the web app from /, something like this. But instead i'm getting this.

I am using React router, my code:

Navigation.js . For bottom navigation bar

import React from 'react';
import { Nav, NavItem} from 'reactstrap';
import { NavLink } from 'react-router-dom';
..
const tabs = [{
    route: "/home",
    icon: faHome,
    label: "Home"
  },{
    route: "/resources",
    icon: faFolder,
    label: "Files"
  },{
    route: "/vault",
    icon: faDiceD20,
    label: "the Vault"
  },{
    route: "/parts",
    icon: faTools,
    label: "Parts"
  },{
    route: "/login",
    icon: faUserCircle,
    label: "Me"
  }]

const Navigation = (props) => {

<nav className="navbar fixed-bottom navbar-light d-block d-lg-none bottom-tab-nav" role="navigation">
        <Nav className="w-100">
          <div className=" d-flex flex-row justify-content-around w-100">
            {
              tabs.map((tab, index) =>(
                <NavItem key={`tab-${index}`}>
                  <NavLink to={tab.route} className="nav-link bottom-nav-link" activeClassName="active">
                    <div className="row d-flex flex-column justify-content-center align-items-center">
                      <FontAwesomeIcon size="lg" icon={tab.icon}/>
                      <div className="bottom-tab-label">{tab.label}</div>
                    </div>
                  </NavLink>
                </NavItem>
              ))
            }
          </div>
        </Nav>
      </nav>
};

App.js

I've added the line <NavLink to path="/" exact component={Home} activeClassName="active"/>to try it out but it didn't make any difference.

import { BrowserRouter, Switch, Route, NavLink} from "react-router-dom";
import Navigation from './navigation';

    <BrowserRouter>
      <Navigation/>
        <Switch>
          <NavLink to path="/" exact component={Home} activeClassName="active"/>
          <Route path="/home" exact component={Home}/>
          <Route path="/vault" exact component={Vault} />
          <Route path="/login" exact component={Login} />
          <Route path="/parts" exact component={Parts} />
          <Route path="/resources" exact component={Resources} />
        </Switch>
    </BrowserRouter>

My current workaround is to change the "start_url" in manifest.json:

  "start_url": "./home",
  "display": "standalone",
  "theme_color": "#FFFFFF",
  "background_color": "#ffffff"

Thanks for reading. Please let me know if there are easier ways to achieve this. Thanks!

can i see your `tabs` array? – 95faf8e76605e973 Sep 30 '20 at 07:01 — 95faf8e76605e973, Sep 30 '20 at 07:01

score 0 · Answer 1 · answered Sep 30 '20 at 06:04

There is a hook called useLocation you can use, which returns the current location object. This might useful any time you need to know the current URL.

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

function highlightLocation() {
    const location = useLocation();
    console.log(location.pathname);
    //Your code to highlight it
}

95faf8e76605e973 · Accepted Answer · 2020-09-30T07:51:53.233

0

I am trying to make my "Home" button highlighted the moment I launch the web app from /

Since your homepage is on the path / you need to assign that as one of your tab in the tabs array

const tabs = [{
    route: "/",
    icon: faHome,
    label: "Home"
  }
  ...

Next, add a corresponding Route of path /

<Route path="/" exact component={Home}/>

At this point /home route can probably be omitted and you can change your start_url back to "start_url": "/"

Finally, refactor your NavLink to have prop exact={true} so that the style will only apply if the path is exactly at root

edited Sep 30 '20 at 07:51

answered Sep 30 '20 at 07:41

95faf8e76605e973

13,643
3
24
51

OP, if you are testing this on PWA, changes may not reflect right away for Chrome regarding the manifest. See my answer here: https://stackoverflow.com/a/63164875/8680805 – 95faf8e76605e973 Sep 30 '20 at 07:47
Thanks! I have made the changes. However, now "Home" will always be highlighted no matter which page I'm on. I have included `exact={true}` too – Aaron Oct 01 '20 at 01:07
You need to put `exact={true}` on `NavLink` as well not just the `Route`. i.e., `` – 95faf8e76605e973 Oct 01 '20 at 01:14
Ahh! Okay, I get it now. Thanks man, worked like a charm :) – Aaron Oct 01 '20 at 02:52

Highlight bottom navbar button selection by default (React router)

2 Answers2