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コンポーネントで "/"を使わずに使用しました。私はコードが動作しなかった新しいバージョンを使用しているので。