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

Question

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

Answer 1

这是因为您已将 Router 组件放置在 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')
  )

建议您阅读更多关于使用 React 路由器和最佳实践的信息，因为这是一个体系结构问题，而且这里要回答的主题非常广泛。

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

React rendering unnecessary component in my app

webpage

reactjs

react-router