реагировать маршрутизатор навигационные ссылки не обновляются при изменении маршрута - PullRequest
Новая
       24

реагировать маршрутизатор навигационные ссылки не обновляются при изменении маршрута

0 голосов
/ 23 октября 2018

У меня есть компонент с заголовком и боковой панелью, который оборачивает маршрутизаторы моего приложения, проблема в том, что <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' к нужному элементу на боковой панели?

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Вам нужно обернуть connect withRouter, а не наоборот ( см. важное примечание в https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md).

Так что вместо 

export default connect(state_to_props)(withRouter(PrivateRoute));

попробуй 

export default withRouter(connect(state_to_props)(PrivateRoute));
0 голосов
/ 23 октября 2018

ваш файл меню боковой панели, который вы можете экспортировать с withRouter(). 

import React, { Component } from "react";
  import { Link, withRouter } from 'react-router-dom';

  class Sidebar extends Component {
              constructor(){
               ....
              }

     render(){
      return(
        <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>
       )
      }
   }
   export default withRouter(Sidebar);
...