2017-12-31 40 views
1

에 대한 리디렉션되지 않으며, 공유기 페이지에서Reactstrap 또는 반작용 라우터 V4의 내 헤더 부분 주소 링크 변경

<NavItem> 
    <NavLink tag={Link} to="/template/editor">New Template</NavLink> 
</NavItem> 

내 홈페이지에있어 경우
<BrowserRouter> 
    <div className="container-fluid"> 
    <Header /> 
    <section className="page-content"> 
     <Route exact path="/" component={HomePage} /> 
     <Route exact path="/template/editor/:id?" component={Authenticate(EditorPage)} /> 
    </section> 
    </div> 
</BrowserRouter> 

(/) 및 새 템플릿 링크 (/ template/editor)를 클릭하면 새 템플릿 페이지로 리디렉션됩니다. 그러나 (/ template/editor/3)을 켜고 새 템플릿 링크 (/ template/editor)를 클릭하면 주소 표시 줄이 업데이트되지만 페이지가 라우팅되지 않습니다. 나는 간단한 것을 놓치고 있다고 확신하지만, 나는 무엇을 알아낼 수 없다.

+0

react-redux를 사용하고'connect'를 사용 하시겠습니까? – Tomasz

+0

@ Tomasz 네, 왜요? – SILENT

+0

아마 이것과 관련이 있습니다 : https://stackoverflow.com/questions/43895805/react-router-4-does-not-update-view-on-link-but-does-on-refresh – Tomasz

답변

1

나는 문제가 무엇인지 확실하지 않다하지만 난 당신이하려고 노력하는 것은이라고 생각 :

<BrowserRouter> 
    <div className="container-fluid"> 
    <Header /> 
    <section className="page-content"> 
     <Switch> 
     <Route exact path="/" component={HomePage} /> 
     <Route path="/template/editor/:id?" component={Authenticate(EditorPage)} /> 
     </Switch> 
    </section> 
    </div> 
</BrowserRouter> 

또한

(I는 react-router-dom 패키지에서 Switch을 사용주의), 당신은 당신이 말했다 react-redux을 사용하면 업데이트되지 않는보기와 관련된 알려진 문제가 있습니다. Look at this question.

+0

내 문제처럼 보입니다. . 고정 된 스위치. 그러나 성능 때문에 순수한 false를 사용하는 것에 대해 주저합니다. 이 문제가 없도록 앱을 디자인해야하는 "올바른 방법"이 있습니까? withRouter 옵션이 더 좋은 방법입니까? – SILENT

+0

@SILENT 예, 이것은 조금 "해킹"입니다. 'connect'는 소품을 비교합니다. 아무 것도 변경되지 않으면 재 렌더링하지 않습니다 (앱 위치가 변경 되었음에도 불구하고). '{pure : false} '로 항상 재 렌더링을하기 위해서'connect'를 지시 할 필요가 있습니다. 또는 (Q 링크에 설명 된 것과 같이)'withRouter'를 사용하여 위치 변경시 변경되는 반응 라우터 소품을 전달할 수 있습니다 . – Tomasz

+1

이제 내비게이션을 통해 탐색 요청이 실행됩니다. 이것은 내가 해킹 방법을 피할 수있게 해주었습니다. – SILENT

관련 문제