在我的应用程序中反应渲染不必要的组件

新来响应和使用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

在我的应用程序中反应渲染不必要的组件

回答

相关问题