javascript - React-router - 组件在父组件状态更改时重新加载？

Question

在我的 React 应用程序中，我有一个来自 material-ui's demo 的 ResponsiveDrawer 组件。 。它基本上只是一个 React 组件，它渲染一个带有菜单项列表、标题栏和内容框架的抽屉。

其状态为 mobileOpen

state = {
    mobileOpen: false
};

当用户单击汉堡包图标时会发生变化

handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
};

(...)

<Drawer type="temporary" anchor="left" open={this.state.mobileOpen} classes={{paper: classes.drawerPaper}} onRequestClose={this.handleDrawerToggle} ModalProps={{keepMounted: true // Better open performance on mobile.}}>
    <div>
        <div className={classes.drawerHeader} />
        <Divider />
        <MenuList onRequestClose={this.handleDrawerToggle} />
    </div>

我还在 ResponsiveDrawer 的内容中设置了一些路由:

<main className={classes.content}>
    <div className={classes.contentWrapper}>
        <Switch>
            <Route
                exact
                path="/currencies"
                component={CurrenciesComponent}
            />
            <Route
                exact
                path="/"
                component={ProfileComponent}
            />
            <Route component={NotFoundComponent} />
        </Switch>
    </div>
</main>

路由中的CurrencyComponent 定义如下:

const CurrenciesComponent = () => (
        <Currencies isSignedIn={this.isSignedIn} />
    );

当我单击汉堡包图标时，ResponsiveDrawer 的状态会发生变化，但是 CurrenciesComponent 也会重新加载(我在那里有一个 API 调用，需要几秒钟才能完成，所以我想避免这种情况)。

如果我按如下方式定义路由(不将属性传递给 Currencies 组件)，则不会发生这种情况:

<Route exact path="/currencies" component={Currencies} />

那么如何在指定路线时避免重新渲染并同时向 Currencies 提供 props 呢？

Answer 1

我通过在路由中使用 render 而不是 component 属性解决了这个问题:

<Route exact path="/currencies" render={CurrenciesComponent}/>