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

【问题标题】：React rendering unnecessary component in my app在我的应用程序中反应渲染不必要的组件
【发布时间】：2018-02-23 18:06:40
【问题描述】：

新的反应和使用反应路由器，所以我有很多页面。我在我的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;

我的 Rentals 组件看起来像这样。

    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/rentals 的页面，该页面仅在新页面中显示“Rentals”组件中的段落。但是，当我单击 Home.jsx 上的出租链接时，它会显示“主页”组件中的所有组件，包括图片，以及页眉和页脚组件。
我尝试在路线上使用确切路径，但没有任何反应。我怎样才能做到这一点？

【问题讨论】：

标签： reactjs react-router webpage

【解决方案1】：

这是因为您将 Router 组件放置在 Home 组件中，而 Home 组件又包含 Header 和 Footer。因此，所有子组件都将在您的 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')
  )

建议您阅读有关使用 React 路由器和最佳实践的更多信息，因为这是一个架构问题，需要在这里回答一个相当广泛的话题。

【讨论】：