React Router v4. Необходимо предотвратить повторный рендеринг компонента (попытка создания сетки изображений, подобной Instagram)

Вы могли либо:

1. Используйте 2 маршрута для рендеринга одного и того же компонента.

как root/items, так и root/items/:itemId визуализируют один и тот же компонент ProductList, вам следует проверить в функции визуализации, существует ли id в маршруте, и условно визуализировать модальное окно с информацией. Вы должны проверить информацию на своем сервере в componentDidMount () или shouldComponentUpdate (), посмотрите, как их реализовать, в официальных документах.

• root / items: отобразит элементы
• root / items /: itemId: тот же компонент, но отображает модальное окно с информацией.

ИЛИ

2. Не используйте маршруты, условный рендеринг другого компонента.

У вас может быть собственный компонент (ProductInfo), который получает идентификатор продукта в качестве реквизита и отображает информацию о продукте. В функции componentDidMount () ProductInfo вы можете запросить свой сервер, чтобы получить информацию и отобразить ее. Теперь в компоненте списка продуктов (ProductList) вы можете выполнить условную визуализацию ProductInfo с идентификатором, переданным в реквизитах.

Информация о продукте

// your imports here
class ProductInfo as Component {
    constructor(){
        this.state = {info:{}}
    }

    componentDidMount(){
        // load info and set info in state using this.props.id
    }

    render(){
        // check if info is set and render all the info however you like
        return(){
            <div>{JSON.stringify( this.state.info )}</div>
        }
    }
}

Список продуктов

//imports here
//import a Modal, or implement however you like, with bootstrap for example
import ProductInfo from './ProductInfo';

class ProductList as Component {
    constructor(){
        this.state = {infoId: -1}
    }

    changeId(e){
        // get the id from the pressed button (or link or whatever component you are using)
        // set the id in the state, remember to clean the state after the modal has been closed: set it back to -1.
    }

    render(){
        // check if id is set
        let {infoId} = this.state;
        let renderModal = infoId > -1;
        return(){
            <div>
                {renderModal &&
                    <Modal>
                        <ProductInfo id = {infoId}/>
                    </Modal>
                }
                <ul>
                    <li>
                        <button
                            type = {'button'}
                            name = {'id1'}
                            onChange = {(e) => this.changeId(e)}>
                            Info 1
                        </button>
                    </li>
                    <li>
                        <button
                            type = {'button'}
                            name = {'id2'}
                            onChange = {(e) => this.changeId(e)}>
                            Info 2
                        </button>
                    </li>
                    <li>
                        <button
                            type = {'button'}
                            name = {'id3'}
                            onChange = {(e) => this.changeId(e)}>
                            Info 3
                        </button>
                    </li>
                </ul>
            </div>
        }
    }
}

Это простой пример, есть много способов сделать это лучше, но я думаю, что это ответ на ваш вопрос.

Предотвращение повторного рендеринга компонентов

Если после этих предложений повторный рендеринг все еще продолжается, возможно, вы выполняете рендеринг каждый раз при загрузке информации. Чтобы предотвратить это, сохраняйте информацию в состоянии и выполняйте условную визуализацию только тогда, когда информация загружена.

import api from './api'; // your custom api component to get data

class ProductList as Component {
    constructor(){
        this.state = {list:[], dataLoaded: false, infoId:-1}
    }

    ...

    componentDidMount(){
        let myList = api.getList(); // basically call any function that gets your data
        this.setState({
            list:myList , dataLoaded: true
        });
    }

    changeId(e){
        // same as previous example
    }

    render(){
        // only render list if data is loaded using conditional rendering
        // 
        let {dataLoaded, list, infoId} = this.state;
        let renderModal = infoId> -1;

        return(
            <div>
                {renderModal &&
                    <Modal>
                        <ProductInfo id = {infoId}/>
                    </Modal>
                }
                {dataLoaded &&
                    <ul>
                        <li>

                        // render your list data here using the variable list from the state

                        <li>
                    </ul>
                }
            </div>
        );
    }
}

Это предотвратит повторное рендеринг списка в React, даже если вы показываете модальное окно.