problem to be solved:
when URL is not the home page ( path="/category" ), the home page (" path="/" ") incorrectly adds activeClassName
first of all, the route pattern is BrowserRouter
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
// ...
class RouteMap extends Component {
render () {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/category" component={props => requireAuth(Category, props)} />
<Route path="/about" component={About} />
<Route path="/help" component={Help} />
<Route path="/login" component={Login} />
<Route component={NotFound} />
<Redirect to="/" />
</Switch>
</Router>
)
}
}
export default RouteMap;then the navigation code is as follows:
import { withRouter, NavLink as Link } from "react-router-dom";
// ...
<li><Link to="/" activeClassName="activeRoute">Home</Link></li>
<li><Link to="/category" activeClassName="activeRoute">category</Link></li>
<li><Link to="/about" activeClassName="activeRoute">about</Link></li>
<li><Link to="/help" activeClassName="activeRoute">Help</Link></li>