11.15 Styling Active Route

The key takeaway is you have to use to nav link object, not the regular link object and you might need to use exact to make sure you only style the links for the routes you want to style and you don't use the to part here as a prefix when it comes to determining whether a route is active or not.

Blog.js

Blog.js

// import axios from "axios";
import React, { Component } from "react";
import { NavLink, Route } from "react-router-dom";
import "./Blog.css";
import NewPost from "./NewPost/NewPost";
import Posts from "./Posts/Posts";

class Blog extends Component {
  render() {
    return (
      <div className="Blog">
        <header>
          <nav>
            <ul>
              <li>
                <NavLink
                  to="/"
                  exact
                  activeClassName="my-active"
                  activeStyle={{
                    color: "#fa923f",
                    textDecoration: "underline",
                  }}
                >
                  Home
                </NavLink>
              </li>
              <li>
                <NavLink
                  to={{
                    pathname: "/new-post",
                    hash: "#submit",
                    search: "?quick-submit=true",
                  }}
                >
                  New Post
                </NavLink>
              </li>
            </ul>
          </nav>
        </header>
        {/* <Route path="/" exact render={() => <h1>Home</h1>} />
        <Route path="/" render={() => <h1>Home2</h1>} /> */}
        <Route path="/" exact component={Posts} />
        <Route path="/new-post" component={NewPost} />
      </div>
    );
  }
}

export default Blog;

Blog.css

Blog.css

.Blog ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.Blog li {
  display: inline-block;
  margin: 20px;
}

.Blog a {
  text-decoration: none;
  color: #000;
}

.Blog a:hover,
.Blog a:active,
.Blog a.active {
  color: #fa923f;
}