Duplicate matching problem on the activeClassName home page of react-router.

import React from "react";
import {BrowserRouter as Router, Route, NavLink} from "react-router-dom";
<Router>
    <div>
      <Navigatio/>
      <Route path="/" exact  component={Index} />
      <Route path="/vgqd" component={Vgqd} />
      <Route path="/txq" component={TxqChildren} />
      <Route path="/comment" component={Comment} />
    </div>
  </Router>

const Navigatio = ()=>(
  <ul className="navigatio-wrap flex-box">
    <li className="flex-item">
      <NavLink to="/" exact activeClassName="active"></NavLink>
    </li>
    <li className="flex-item">
      <NavLink to="/vgqd" activeClassName="active"></NavLink>
    </li>
    <li className="flex-item">
      <NavLink to="/txq" activeClassName="active">txq</NavLink>
    </li>
    <li className="flex-item">
      <NavLink to="/comment" activeClassName="active"></NavLink>
    </li>
  </ul>