时间戳

首页 > 解决方案 > React activeClassName 在服务器上不起作用

javascript - React activeClassName 在服务器上不起作用

问题描述

React activeClassName="active" 在服务器上不起作用。它在我的本地工作正常。

导航栏.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>

路由.js

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

应用程序.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'));

在我的本地输出

在此处输入图像描述

服务器上的输出

在此处输入图像描述

标签： javascriptreactjsreact-router

解决方案

问题可能是如果您的应用程序被用作您的生产中的子目录，例如http://yourdomain.com/your-application。在这种情况下，您应该使用路由器的basename属性。

推荐阅读