リアクタールーターはすべてのルート（ヘッダー）に1つのコンポーネントを表示します

Question

リアクションルーターに関する質問があります。

私はすべてのルートで表示したいヘッダ項目を持っています。そして、もちろん、これはユーザーがナビからアイテムをクリックできるようにするためにこれを部分的にしたいと思います。

現在、私は自分の<Router>の外に私の<Header />を持っています、そして、私はこのルータが再レンダリングするのを知らないので、これは動作していないと思いますか？

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 
    <div> 
    <Header /> 
    <Router> 
     <Switch> 
     <Route exact path="/" component={Posts} /> 
     <Route exact path="/:category/:postId" component={PostDetails} /> 
     <Route path="/:category" component={CategoryView} /> 
     </Switch> 
    </Router> 
    </div> 

そして、私のヘッダーは、例えば<Link to="/">LOGO</Link>

Answer 1

次の実装は、このようなソリューションのためのベストプラクティスを概説しています。

<Header/>コンポーネントを<Router/>コンポーネント内にネストするだけです。

また、<Switch/>コンポーネントは不要です。

import { 
    BrowserRouter as Router, 
    Route 
} from 'react-router-dom' 

ReactDOM.render(
    <Router> 
    <Application> 
     <Route exact path="/" component={Posts} /> 
     <Route exact path="/:category/:postId" component={PostDetails} /> 
     <Route path="/:category" component={CategoryView} /> 
    </Application> 
    </Router> 
, document.querySelector('#ROOT')) 

const Application = (props) => (
    <div> 
    <Header/> 
    {props.children} 
    </div> 
) 

Answer 2

答えで私のコメント：

class App extends Component { 
    render() { 
    return (
     <BrowserRouter> 
     <div> 
      <Header /> 
      <Switch> 
      <Route exact path="/" component={Posts} /> 
      <Route exact path="/:category/:postId" component={PostDetails} /> 
      <Route path="/:category" component={CategoryView}/
      </Switch> 
      <Footer /> 
     </div> 
     </BrowserRouter> 
    ); 
    } 
} 

Answer 3

あなたが場所を変更したが、同じルートが一致した場合、コンポーネントは、単に新しい小道具を受け、再マウントされていません。

したがって、あなたは新しいルートのparamsを使用してコンポーネントを更新するcomponentWillReceivePropsフックを使用することができます（例えばnextProps.match.params.category）：

... 

componentWillReceiveProps(nextProps) { 

    // Update component using nextProps 

} 

...