React-Router 활성 클래스가 중첩 된 경로에 대해 작동하지 않습니다.

미니 피그 마스터 125

몇 가지 github 문제와 유사한 게시물을 살펴 봤지만이를 파악할 수 없습니다. 여기에 내 경로가 있습니다.

  <Router history={browserHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Landing} />
      <Route path='login' component={LoginContainer} />
      <Route path='user' component={UserContainer} onEnter={checkAuth} >
        <Route path='home' component={HomeContainer} />
        <Route path='settings' component={SettingsContainer} />
        <Route path='doc_attributes' component={AttributesContainer} />
        <Route path='groups' component={GroupsContainer} />
        <Route path='rules' component={RulesContainer} />
      </Route>
      <Route path='/dropbox/auth_finish' onEnter={doDropbox} />
      <Route path='/box/auth_finish' onEnter={doBox} />
      <Route path='/googledrive/auth_finish' onEnter={doGDrive} />
      <Route path='/onedrive/auth_finish' onEnter={doOneDrive} />
    </Route>
  </Router>

관심있는 링크는 다음과 같습니다.

<li><Link to='/user/home' activeClassName="activeLink"><i className="fa fa-home fa-3x fa-fw" aria-hidden="true"></i></Link></li>
<li><Link to='/user/settings' activeClassName="activeLink"><i className="fa fa-wrench fa-3x fa-fw" aria-hidden="true"></i></Link></li>
<li><Link to='/user/groups' activeClassName="activeLink"><i className="fa fa-users fa-3x fa-fw" aria-hidden="true"></i></Link></li>
<li><Link to='/user/rules' activeClassName="activeLink"><i className="fa fa-tasks fa-3x fa-fw" aria-hidden="true"></i></Link></li>

링크는 정상적으로로드되지만 활성 클래스 CSS를 얻지 못합니다. 로드시 첫 번째 경로 만 가져옵니다. 아무도 아이디어가 있습니까?

미니 피그 마스터 125

그래서이 질문을받은 지 오래되었지만 답을 알아 내서 공유해야합니다.

구성 요소를 렌더링하고 탐색을위한 상태 업데이트를받는 컨테이너 {pure: false}에서 connect 함수 를 입력해야했습니다 . 본질적으로 구성 요소가 "순수"(업데이트는 props에서만 제공됨)가 아닌 경우 반응 컨텍스트에 의존하여 다시 렌더링한다는 사실과 관련이 있습니다. 다음은 코드 블록입니다.

const NavContainer = ReactRedux.connect( MapStateToProps, MapDispatchToProps, null, {pure: false} )(Nav)

문제에 대한 문서 : https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md

내가 해결하는 데 도움이 된 문제 : https://github.com/ReactTraining/react-router/issues/3286

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

React Router-: id가있는 경로가 HOC로 래핑 된 구성 요소에 대해 올바르게 작동하지 않습니다.

분류에서Dev

Onactivityresult가 중첩 된 조각 클래스 android에서 제대로 작동하지 않습니다.

분류에서Dev

AngularJS ui-router가 예상대로 중첩 된 URL로 작동하지 않습니다.

분류에서Dev

React-Router 중첩 경로가 작동하지 않음

분류에서Dev

매핑 된 중첩 된 구성 요소가 제대로 작동하지 않음 (React Js)

분류에서Dev

중첩 된 컬렉션의 속성에 대한 EF Core 합계가 작동하지 않습니다.

분류에서Dev

CSS-중첩 된 ul li에 대해 추가 된 들여 쓰기가 작동하지 않습니다.

분류에서Dev

중첩 된 for 루프-@RadioButtonFor가 예상대로 작동하지 않습니다.

분류에서Dev

React-router-dom 중첩이 하위 구성 요소에서 작동하지 않습니다.

분류에서Dev

ui-router의 중첩 된 경로가 해결되지 않음

분류에서Dev

React Router v5 : 동적 경로에 중첩 된 경로가 필요합니다.

분류에서Dev

nested_form gem을 통해 추가 된 중첩 속성에 대해 booty 편집기가 작동하지 않음

분류에서Dev

Angular resetForm은 중첩 된 개체에 대해 작동하지 않습니다.

분류에서Dev

react-router의 중첩 된 구성 요소가 렌더링되지 않습니다.

분류에서Dev

중첩 라우팅이 react-router에서 작동하지 않습니다.

분류에서Dev

React-router가 중첩 된 페이지를로드 할 수 없습니다.

분류에서Dev

ReactJS-react-router 중첩 경로가 렌더링되지 않았습니다.

분류에서Dev

지도가있는 중첩 된 foreach가 Velocity에서 제대로 작동하지 않습니다.

분류에서Dev

경로가 활성화되면 Vue-Router가 작동하지 않습니다.

분류에서Dev

상위 클래스 가변 템플릿 인수에 대해서만 중첩 클래스 템플릿을 활성화하려면 어떻게해야합니까?

분류에서Dev

비활성화 된 버튼에 대한 화재 경고가 firefox에서 작동하지 않습니다.

분류에서Dev

React Router-렌더링되지 않는 중첩 된 경로

분류에서Dev

Linq2Rest가 중첩 된 속성에서 작동하지 않습니까?

분류에서Dev

ng-repeat에 중첩 된 json이 제대로 작동하지 않습니다.

분류에서Dev

Rails 4 / Ruby 2 : 중첩 된 속성 저장이 예상대로 작동하지 않습니다.

분류에서Dev

단일 구성 요소의 react-router에 대해 리디렉션이 작동하지 않습니다.

분류에서Dev

중첩 된 구성 요소의 innerHTML에 대한 바인딩이 작동하지 않습니다.

분류에서Dev

중첩 된 For 루프 (C ++)가 제대로 작동하지 않음

분류에서Dev

중첩 된 for 루프가 제대로 작동하지 않음

Related 관련 기사

  1. 1

    React Router-: id가있는 경로가 HOC로 래핑 된 구성 요소에 대해 올바르게 작동하지 않습니다.

  2. 2

    Onactivityresult가 중첩 된 조각 클래스 android에서 제대로 작동하지 않습니다.

  3. 3

    AngularJS ui-router가 예상대로 중첩 된 URL로 작동하지 않습니다.

  4. 4

    React-Router 중첩 경로가 작동하지 않음

  5. 5

    매핑 된 중첩 된 구성 요소가 제대로 작동하지 않음 (React Js)

  6. 6

    중첩 된 컬렉션의 속성에 대한 EF Core 합계가 작동하지 않습니다.

  7. 7

    CSS-중첩 된 ul li에 대해 추가 된 들여 쓰기가 작동하지 않습니다.

  8. 8

    중첩 된 for 루프-@RadioButtonFor가 예상대로 작동하지 않습니다.

  9. 9

    React-router-dom 중첩이 하위 구성 요소에서 작동하지 않습니다.

  10. 10

    ui-router의 중첩 된 경로가 해결되지 않음

  11. 11

    React Router v5 : 동적 경로에 중첩 된 경로가 필요합니다.

  12. 12

    nested_form gem을 통해 추가 된 중첩 속성에 대해 booty 편집기가 작동하지 않음

  13. 13

    Angular resetForm은 중첩 된 개체에 대해 작동하지 않습니다.

  14. 14

    react-router의 중첩 된 구성 요소가 렌더링되지 않습니다.

  15. 15

    중첩 라우팅이 react-router에서 작동하지 않습니다.

  16. 16

    React-router가 중첩 된 페이지를로드 할 수 없습니다.

  17. 17

    ReactJS-react-router 중첩 경로가 렌더링되지 않았습니다.

  18. 18

    지도가있는 중첩 된 foreach가 Velocity에서 제대로 작동하지 않습니다.

  19. 19

    경로가 활성화되면 Vue-Router가 작동하지 않습니다.

  20. 20

    상위 클래스 가변 템플릿 인수에 대해서만 중첩 클래스 템플릿을 활성화하려면 어떻게해야합니까?

  21. 21

    비활성화 된 버튼에 대한 화재 경고가 firefox에서 작동하지 않습니다.

  22. 22

    React Router-렌더링되지 않는 중첩 된 경로

  23. 23

    Linq2Rest가 중첩 된 속성에서 작동하지 않습니까?

  24. 24

    ng-repeat에 중첩 된 json이 제대로 작동하지 않습니다.

  25. 25

    Rails 4 / Ruby 2 : 중첩 된 속성 저장이 예상대로 작동하지 않습니다.

  26. 26

    단일 구성 요소의 react-router에 대해 리디렉션이 작동하지 않습니다.

  27. 27

    중첩 된 구성 요소의 innerHTML에 대한 바인딩이 작동하지 않습니다.

  28. 28

    중첩 된 For 루프 (C ++)가 제대로 작동하지 않음

  29. 29

    중첩 된 for 루프가 제대로 작동하지 않음

뜨겁다태그

보관