首页 文章

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

提问于
浏览 次
2

新的反应和使用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 / rental的页面，它只显示新页面中"Rentals"组件的段落 . 但是，当我点击Home.jsx上的租借链接时，它会显示"Home"组件中的所有组件，包括图片，以及页眉和页脚组件 .
我尝试在路线上使用精确路径，没有任何反应 . 我怎么能实现这个目标？

reactjs react-router webpage

1 回答

  • 1

    这是因为您已将路由器组件放置在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路由器和最佳实践的更多信息，因为这是一个架构问题，需要在此处回答相当广泛的主题 .

    回复于

相关问题