在我的應用程序中反應渲染不必要的組件

新來響應和使用React路由器，以便我有很多頁面。我在我的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上的租賃鏈接時，它會顯示「主頁」組件中的所有組件，包括圖片，頁眉和頁腳組件。
我嘗試使用路線上的確切路徑，什麼也沒有發生。我怎麼能做到這一點？

來源

2017-09-14 craftdeer

這是因爲您已將路由器組件放置在您的Home組件中，而Home組件又具有您的頁眉和頁腳。所以所有的子組件都將在您的Home組件中呈現。

您的路由器組件應該位於您的應用程序的頂層，並且所有其他組件如Home，Rentals等應作爲子路徑添加到路由器。

只是給你一個例子，它應該是這樣的。

//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') 
)

會建議你閱讀更多關於使用陣營路由器和最佳做法，因爲這是一個結構問題，在這裏回答很廣泛的話題。

來源

2017-09-14 17:07:44 codeslayer1

在我的應用程序中反應渲染不必要的組件

回答

相關問題