NavLink의 ActiveStyle이 반응 라우터에서 제대로 작동하지 않습니다.

Question

이 동일한 문제를 설명하는 많은 링크를 언급했습니다. 일부는 here 및 here입니다. 나는 방금 반응을 시작했고 그곳에서 설명 된 것을 이해하는 것을 매우 어렵게 생각했습니다. 나는 튜토리얼 building react applications with idiomatic redux code을 따라 갔다. 사용 된 라우터 버전이 오래되었습니다. 4로 업데이트하여이 문제가 발생했습니다. 내 코드는 아래와 같습니다.

const Root = ({ store }) => (
    <BrowserRouter> 
     <Provider store={store}> 
      <Route path="/:filter?" component={App} /> 
     </Provider> 
    </BrowserRouter> 
); 

class App extends Component { 
    render() { 
     return (
      <div> 
       <AddTodo /> 
       <VisibleTodoList /> 
       <Footer location={this.props.location}/> 
      </div> 
     ); 
    } 
} 

const Footer = ({ location }) => (
    <p> 
     Show :{" "} 
     <FilterLink location={location} filterValue="all"> 
      All 
     </FilterLink>{" "} 
     <FilterLink location={location} filterValue="active"> 
      Active 
     </FilterLink>{" "} 
     <FilterLink location={location} filterValue="completed"> 
      Completed 
     </FilterLink> 
     </p> 
); 

const FilterLink = ({ filterValue, children, location }) => { 
    return (
     <NavLink 
      to={filterValue === "all" ? "" : filterValue} 
      activeStyle={{ textDecoration: "none", color: "red" }} 
     > 
      {children} 
     </NavLink> 
    ); 
}; 

이 코드는 브라우저의 URL을 적절하게 변경합니다. 그러나 스타일은 업데이트되지 않습니다. 모든 작업에서 링크 "모두"가 빨간색입니다.

위치 소품 (설명 : here)을 전달하면 구성 요소가 다시 렌더링되고 스타일이 업데이트됩니다 (여기에 잘못 입력 한 경우 수정하십시오). 그러나 그것은 일어나지 않았다. 누군가가 이것에 나를 도울 수 있습니까?

Answer 1

나는 실수를 나타 냈습니다. 문제는 위의 그림과 같이 "to" 소품은 처음에 "/" 제공해야 여기

const FilterLink = ({ filterValue, children }) => { 
    return (
     <NavLink 
      exact 
      to={filterValue === "all" ? "/" : `/${filterValue}`} 
      activeStyle={{ textDecoration: "none", color: "red" }} 
     > 
      {children} 
     </NavLink> 
    ); 
}; 

있다.

나는 이것을 빠뜨렸다. 이것은 내 문제를 해결했다. 위치 소품을 전달할 필요가 없습니다. 튜토리얼에서 그는 FilterLink 구성 요소에 "/"없이 사용했습니다. 이후 코드가 작동하지 않는 새 버전을 사용하고 있습니다.