Reactjs 防止在状态更改时卸载组件

我正在使用react router（v.4.3.1）来呈现我的应用程序的主要部分，我在菜单的左侧有一个抽屉。当在应用程序标题中切换按钮时，我正在更改折叠变量的状态，以便组件一致地重新呈现css。我的问题是，这个变量需要存储在呈现所有我的

Route

的组件上，当组件更新时

Route

正在卸载和装载它的组件

我已经尝试为我的

路线提供
键
，但它不起作用

我的代码如下所示，此组件的父组件是正在更新的组件，它重新呈现我的
Main
组件：

class Main extends Component {
    constructor(props) {
        super(props);
        this.observer = ReactObserver();
    }

    getLayoutStyle = () => {
        const { isMobile, collapsed } = this.props;
        if (!isMobile) {
            return {
                paddingLeft: collapsed ? '80px' : '256px',
            };
        }
        return null;
    };

    render() {
        const RouteWithProps = (({index, path, exact, strict, component: Component, location, ...rest}) =>
                <Route path={path}
                       exact={exact}
                       strict={strict}
                       location={location}
                       render={(props) => <Component key={"route-" + index} observer={this.observer} {...props} {...rest} />}/>
        );

        return (
            <Fragment>
                <TopHeader observer={this.observer} {...this.props}/>
                <Content className='content' style={{...this.getLayoutStyle()}}>
                    <main style={{margin: '-16px -16px 0px'}}>
                        <Switch>
                            {Object.values(ROUTES).map((route, index) => (
                                <RouteWithProps {...route} index={index}/>
                            ))}
                        </Switch>
                    </main>
                </Content>
            </Fragment>
        );
    }
}

类主扩展组件{
建造师（道具）{
超级（道具）；
this.observer=ReactObserver（）；
}
getLayoutStyle=（）=>{
const{isMobile，collapsed}=this.props；
if（！isMobile）{
返回{
paddingLeft:折叠的“80px”：“256px”，
};
}
返回null；
};
render（）{
const RouteWithProps=（{index，path，exact，strict，component:component，location，…rest}）=>
}/>
);
返回(
{Object.values（ROUTES.map）（（route，index）=>(
))}
);
}
}

我希望路由只是更新，而不是卸载组件。这是可能的吗？
由于在渲染方法内部定义了
RouteWithProps
，因此出现了此问题。这导致每次调用render方法时，React都会卸载旧的并装载新的。实际上，在渲染方法中动态创建组件是一个性能瓶颈，被认为是一种不好的做法

只需将
RouteWithProps
的定义移出
Main
组件即可

近似代码结构如下所示：

// your impors

const RouteWithProps = ({observer, path, exact, strict, component: Component, location, ...rest}) =>
     <Route path={path}
         exact={exact}
         strict={strict}
         location={location}
         render={(props) => <Component observer={observer} {...props} {...rest} />}/>;

class Main extends Component {
    ...

    render(){
        ...
        {Object.values(ROUTES).map((route, index) => (
            <RouteWithProps key={"route-" + index} {...route} observer={this.observer}/>
        ))}
                            ^^^ keys should be on this level
        ...
    }
}

//您的导入
const RouteWithProps=（{observer，path，exact，strict，component:component，location，…rest}）=>
}/>;
类主扩展组件{
...
render（）{
...
{Object.values（ROUTES.map）（（route，index）=>(
))}
^^^钥匙应该在这个级别上
...
}
}
由于在渲染方法内部定义了
RouteWithProps
，因此出现了此问题。这导致每次调用render方法时，React都会卸载旧的并装载新的。实际上，在渲染方法中动态创建组件是一个性能瓶颈，被认为是一种不好的做法

只需将
RouteWithProps
的定义移出
Main
组件即可

近似代码结构如下所示：

// your impors

const RouteWithProps = ({observer, path, exact, strict, component: Component, location, ...rest}) =>
     <Route path={path}
         exact={exact}
         strict={strict}
         location={location}
         render={(props) => <Component observer={observer} {...props} {...rest} />}/>;

class Main extends Component {
    ...

    render(){
        ...
        {Object.values(ROUTES).map((route, index) => (
            <RouteWithProps key={"route-" + index} {...route} observer={this.observer}/>
        ))}
                            ^^^ keys should be on this level
        ...
    }
}

//您的导入
const RouteWithProps=（{observer，path，exact，strict，component:component，location，…rest}）=>
}/>;
类主扩展组件{
...
render（）{
...
{Object.values（ROUTES.map）（（route，index）=>(
))}
^^^钥匙应该在这个级别上
...
}
}
就是这样。我不敢相信我错过了这个。非常感谢，就这样。我不敢相信我错过了这个。非常感谢你。