From 07f568019bdc1a77cd798db66b1ea10fd0ac8838 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Mihai=20B=C4=83r=C4=83gan?= Date: Thu, 8 Sep 2016 20:23:13 +0300 Subject: [PATCH] Fix active class highlighting 1. react will only interpret activeClassName to apply class="what-you-provided" if found on Link components 2. bootstrap will only look for class="active" on li elements, hence the overrides.css 3. in order to prevent wrong highlighting one can provide onlyActiveOnIndex or use IndexLink; second seemed cleaner TODO: there are still problems with active highlighting when using back browser button... --- 2-react-router/src/index.html | 1 + 2-react-router/src/js/components/layout/Nav.js | 14 +++++++------- 2-react-router/src/overrides.css | 4 ++++ 3 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 2-react-router/src/overrides.css diff --git a/2-react-router/src/index.html b/2-react-router/src/index.html index b1e5930e..fb553f71 100644 --- a/2-react-router/src/index.html +++ b/2-react-router/src/index.html @@ -14,6 +14,7 @@ + diff --git a/2-react-router/src/js/components/layout/Nav.js b/2-react-router/src/js/components/layout/Nav.js index b768499b..8e4a437e 100644 --- a/2-react-router/src/js/components/layout/Nav.js +++ b/2-react-router/src/js/components/layout/Nav.js @@ -15,7 +15,7 @@ export default class Nav extends React.Component { } render() { - const { location } = this.props; + // const { location } = this.props; const { collapsed } = this.state; // const featuredClass = location.pathname === "/" ? "active" : ""; // const archivesClass = location.pathname.match(/^\/archives/) ? "active" : ""; @@ -35,14 +35,14 @@ export default class Nav extends React.Component {
diff --git a/2-react-router/src/overrides.css b/2-react-router/src/overrides.css new file mode 100644 index 00000000..d7df76fc --- /dev/null +++ b/2-react-router/src/overrides.css @@ -0,0 +1,4 @@ +.navbar-inverse .navbar-nav a.active { + color: #ffffff; + background-color: #022f5a; +}