NavLink

예시

import React from 'react';
import { BrowserRouter, Link, NavLink, Route, Switch, withRouter, useHistory } from 'react-router-dom';
import './App.css'



const Sidebar = (props) => {
  // const history = useHistory();

  return (
    <section className="sidebar">
      {/* <button className="fas fa-arrow-left" onClick={() => history.goBack()}></button> */}
      <button className="fas fa-arrow-left" onClick={props.history.goBack}></button>
      <NavLink exact to='/' activeClassName="selected">
        <i className="far fa-comment-dots"></i>
      </NavLink>
      <NavLink to='/about' activeClassName="selected">
        <i className="far fa-question-circle" ></i>
      </NavLink>
      <NavLink to='/mypage' activeClassName="selected">
        <i className="far fa-user"></i>
      </NavLink>
    </section>
  );
};

export default withRouter(Sidebar);
JavaScript
복사

.selected .far {
  color: #70a4f1;
}
JavaScript
복사