Предотвращение реакции размонтирования компонента маршрута при изменении состояния

Question

Я использую реагирующий маршрутизатор (v.4.3.1) для рендеринга основной части моего приложения, и у меня есть ящик слева с меню.Когда в заголовке приложения переключается кнопка, я изменяю состояние свернутой переменной, чтобы компоненты соответствующим образом повторно отображали CSS.Моя проблема в том, что эта переменная должна быть сохранена на компоненте, отображающем все мои Route, и когда компонент обновляется, Route отключается и монтирует его компонент.

Я уже пытался предоставить key к моему 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>
        );
    }
}

Я бы хотел, чтобы маршрут только обновлял, а не размонтировал компонент.это возможно?

Answer 1

у вас возникла эта проблема из-за определения RouteWithProps внутри метода рендеринга. Это приводит к тому, что React размонтирует старый и монтирует новый каждый раз, когда вызывается метод render. На самом деле создание компонента динамически в методе рендеринга является узким местом производительности и считается плохой практикой.

Просто переместите определение 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
        ...
    }
}