React在我的应用程序中呈现不必要的组件

Question

新的反应和反应路由器，使我有许多网页的工作。我在我的家里。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/rentals的页面，它只在新页面中显示“rentals”组件中的段落。但是当我点击房屋上的租赁链接时。在jsx中，它显示“主”组件中的所有组件，包括图片、页眉和页脚组件
我尝试在路线上使用精确路径，但什么也没发生。我怎样才能做到这一点？

Answer 1

这是因为您已将路由器组件置于Home组件中，而Home组件又具有Header和页脚。因此，所有子组件都将在您的Home组件中呈现。

你的路由器组件应该在你的应用程序的顶层，所有其他组件，如家庭，租赁等，应该作为一个孩子添加到路由器。

只是给大家举个例子，应该是这样的东西。

//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路由器和最佳实践的信息，因为这是一个架构问题，需要在这里回答相当广泛的主题。