У меня есть компонент с заголовком и боковой панелью, который оборачивает маршрутизаторы моего приложения, проблема в том, что <NavLink>
не обновляется при изменении маршрута, если предположить, что причиной этой проблемы является то, что они находятся вышемаршрутизатор и, следовательно, не затронуты изменениями, я пытался всеми возможными способами, но не нашел решения, как я могу заставить <NavLink>
добавить класс active
к текущему маршруту?
вот мой app.js
<Switch>
<Route path="/login" component={ Login } />
<PrivateRoute path="/" component={ Dashboard } exact />
<PrivateRoute path="/members" component={ Members } exact />
<PrivateRoute path="/payments" component={ Bills } exact />
<PrivateRoute path="/gas-stations" component={ GasStations } exact />
<PrivateRoute path="/transactions" component={ Transaction } exact />
<PrivateRoute path="/cms" component={ CMS } />
<PrivateRoute path="/members/:member_id" component={ Member } />
<PrivateRoute path="/gas-stations/:gs" component={ GS } />
<PrivateRoute path="/transactions/:transaction_id" component={ FoundTransaction } />
<PrivateRoute path="/payments/:payment_id" component={ Payment } />
</Switch>
my private-rout.js
import React from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Container from 'components/container';
const PrivateRoute = ({ component : Component, authenticated, ...rest }) => {
return (
<Route { ...rest } render={ (props) => (
authenticated === true
? <Container> // this is the component that wraps the header and the sidebar
<Component { ...props } />
</Container>
: <Redirect to="/login" />
) } />
)
}
const state_to_props = (state, prop) => {
return {
authenticated : state.authenticated
}
}
export default connect(state_to_props)(withRouter(PrivateRoute));
container.js
return (
<div>
<Header />
<SideMenu />
<div className="app-content">
{ props.children }
</div>
</div>
)
side-menu.js
<li>
<NavLink to="/" exact> <span>Dashboard</span> </NavLink>
</li>
<li>
<NavLink exact to="/members"> <span>Members</span> </NavLink>
</li>
<li>
<NavLink exact to="/gas-stations"> <span>Gas Stations</span> </NavLink>
</li>
<li>
<NavLink exact to="/payments"> <span>Payments</span> </NavLink>
</li>
<li>
<NavLink exact to="/transactions"> <span>Transactions</span> </NavLink>
</li>
<li>
<NavLink exact to="/cms"> <span>CMS</span> </NavLink>
</li>
какМогу ли я обновить этот компонент, чтобы <NavLink>
продолжал добавлять класс 'active' к нужному элементу на боковой панели?