Question

新的反应和使用React路由器以便我有很多页面。我在public class MenuTableViewSource : UITableViewSource { List<MenuModel> TableItems; string CellIdentifier = "MenuTableViewCell"; public MenuTableViewSource (List<MenuModel> menuItems) { TableItems = menuItems; } public override nint RowsInSection (UITableView tableview, nint section) { return TableItems.Count; } public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) { MenuTableViewCell cell = tableView.DequeueReusableCell (CellIdentifier) as MenuTableViewCell; MenuModel item = TableItems[indexPath.Row]; if (cell == null) cell = MenuTableViewCell.Create (); cell.BackgroundColor = UIColor.White; cell.SeparatorInset = UIEdgeInsets.Zero; cell.LayoutMargins = UIEdgeInsets.Zero; cell.MenuItemTextLabel.Text = item.Title; cell.AccessoryView = new UIImageView(image: new UIImage("chevron-right.png")); return cell; } public override void RowSelected(UITableView tableView, NSIndexPath indexPath) { MenuModel item = TableItems[indexPath.Row]; item.Navigate.Execute(null); Mvx.Resolve<IMvxSideMenu>().Close(); } public override nfloat GetHeightForRow (UITableView tableView, NSIndexPath indexPath) { return 60f; } }，看起来像这样。

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;

我要做的是创建一个名为localhost：3000 / rental的页面，它只显示来自＆＃34; Rentals＆＃34;新页面中的组件。但是当我点击Home.jsx上的租借链接时，它会显示＆＃34; Home＆＃34;中的所有组件。组件包括图片，Header和Footer组件。
我尝试在路线上使用精确路径，没有任何反应。我怎么能实现这个目标？

Answer 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路由器和最佳做法的更多信息，因为这是一个架构问题，需要在此处回答相当广泛的主题。

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

1 个答案: