私のアプリケーションで不要なコンポーネントをレンダリングするには

Question

React Routerに反応して作業して、ページがたくさんあることを新しくしました。 私はHome.jsxにいます。このように見えます。

import React, { Component } from 'react'; 
    import randomimage from '../imagefolder/rentalbackground.jpg'; 
    import Header from './Header'; 
    import Footer from './Footer'; 
    import Rentals from './Rentals'; 
    import { 
     BrowserRouter as Router, 
     Route, 
     Redirect, 
     Link 
    } from 'react-router-dom'; 

    class Home extends Component { 
     render() { 
     return (
     <div> 
      <Header /> 
      <Router> 
       <div> 
        <Link to="/rentals">Rentals</Link> 
        <main> 
         <Route path="/" component={Rentals} /> 
        </main> 
       </div> 
      </Router> 
      <p>some paragraph here</p> 
      <img src={randomimage} alt="imagerand" /> 
      <Footer /> 
     </div> 
    ); 
    } 
    } 
export default Home; 

そして、私のレンタルコンポーネントは次のようになります。私がやろうとしています何

import React, { Component } from 'react'; 
    class Rentals extends Component { 
    render() { 
     return (
     <div> 
      <p>this is for all the rentals</p> 
     </div> 
      ) 
      } 
      } 
    export default Rentals; 

はlocalhostというページを作成です：3000 /レンタルのみ新しいページで「レンタル」のコンポーネントから段落を表示します。しかし、私がHome.jsxにあるレンタルリンクをクリックすると、写真を含む "ホーム"コンポーネントのすべてのコンポーネントと、ヘッダーとフッターコンポーネントも表示されます。
Routeで正確なパスを使用しようとしましたが、何も起こりません。どうすればこれを達成できますか？

Answer 1

これは、ルーターコンポーネントをホームコンポーネント内に配置したためです。ホームコンポーネントには、ヘッダーとフッターがあります。したがって、すべての子コンポーネントがホームコンポーネント内でレンダリングされます。

ルータのコンポーネントは、アプリケーションのトップレベルにある必要があります。ホーム、レンタルなどのその他のコンポーネントはすべて、ルータの子として追加する必要があります。

例を挙げると、これは次のようなものです。

//Your app initialisation, Top Level 
ReactDOM.render(
    <div style={{height: '100%'}}> 

     //All Your routes can be exported at one place and passed to your router as props. This will also help you maintain routes at one place 
     <Router history={browserHistory} children={routes}/> 

    </div>, 
    document.getElementById('root') 
) 

は、このアーキテクチャの問題であり、非常に幅広い話題をここで回答するので、ルータやベストプラクティスを反応させるの使用方法の詳細を読むことをお勧めします。