React activeClassName не работает на сервере

Question

React activeClassName = "активный" не работает на сервере. Он работает правильно на моем локальном.

Navbar.js

<ul className="sidebar-elements">
    <li><NavLink to="/" exact activeClassName="active">Dashboard</NavLink></li>
    <li><NavLink exact to="/about" activeClassName="active">About Us</NavLink></li>
    <li><NavLink exact to="/contact" activeClassName="active">Contact Us</NavLink></li>
</ul>

Routes.js

<Switch>
        <Route exact path="/" component={Dashboard} />
        <Route exact path="/about" component={About} />
        <Route exact path="/contact" component={Contact} />
</Switch>

App.js

<div className ="App ">
    <div className="contentSection">
        <Navbar/>
        <main id="content">
            <Routes /> 
        </main>
    </div>
</div>

index.js

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Выход на локальный

введитеописание изображения здесь

вывод на сервер

введите описание изображения здесь

Answer 1

Проблема может заключаться в том, что ваше приложение обслуживается в качестве подкаталога на вашем производстве, например http://yourdomain.com/your-application.. В этом случае вам следует использовать свойство basename маршрутизатора.