내 애플 리케이션에서 불필요한 구성 요소를 렌더링에 반응하십시오.

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; 

는 그리고 내 대여 구성 요소는 다음과 같습니다. 단지 새 페이지에서 "대여"구성 요소에서 단락을 표시 3000/대여 : 내가 뭘하려고 오전

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

는 페이지라는 로컬 호스트를 만드는 것입니다. 그러나 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') 
) 

는이 아키텍처의 문제이며 매우 광범위한 주제는 여기에 대답 할 수 있기 때문에 라우터 및 모범 사례 반응 사용에 대한 자세한 내용을 제안합니다.