React activeClassname problem?

I encountered a problem at the beginning of learning react,. Ask
to set the class error of the current display route

.
import React,{ Component } from "react";
import router1 from "./router1";
import router2 from "./router2";
import router3 from "./router3";
import "./main.css";
import {
    BrowserRouter as Router,
    Route,
    Link
}from "react-router-dom";

class main extends Component {
render() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/" className="active" activeClassname="current">1</Link></li>
                    <li><Link to="/router2" className="active" activeClassname="current">2</Link></li>
                    <li><Link to="/router3" className="active" activeClassname="current">3</Link></li>
                </ul>
                <hr />
                <Route exact path="/" component={router1} />
                <Route path="/router2" component={router2} />
                <Route path="/router3" component={router3} />
            </div>
        </Router>
    );
}
}

export default main;

clipboard.png

hint that it should be changed to lowercase, but it won"t work if it doesn"t make a mistake. I just learned react, for a day and asked the boss for advice

Mar.09,2021

what is the version of ReactRouter? activeCLassName seems to have to be put in the NavLink component

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3d4ed-2c397.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3d4ed-2c397.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?