Как передать состояние компонентам, отображаемым маршрутизатором

Question

Я делаю портфолио React, и один из компонентов будет галереей изображений (само собой разумеется, я новичок ie в React, иначе я бы не стал задавать этот вопрос). Для этого я буду использовать пакет (response-image-gallery), который позволяет мне настраивать несколько элементов. Я уже установил, и он работает хорошо, но мне нужно настроить его - скрыть миниатюры и кнопки «играть» и «полный экран».

Согласно документации, это можно сделать через состояние. Проблема в том, что я не могу этого сделать, потому что для навигации по приложению используется маршрутизатор, и хотя я очень старался, я не смог передать состояние в компонент, размещенный на маршрутизаторе. Это код основного компонента (эквивалент приложения), который не работает:

import "./styles.css";

import {
  HashRouter,
  NavLink,
  Route
} from "react-router-dom";
import React, { Component } from "react";

import Development from "./Development";
import Home from "./Home";
import Intro from "./Intro";
import Media from "./Media";
import StudyCase from './StudyCase';
import Stuff from "./Stuff";

class Main extends Component {
    constructor() {
        super();
        this.state = {
            showThumbnails: false
        };
    }
  render() {
    return (
            <HashRouter>
                <div>
                    <ul className='top-menu'>
                        <li>
                            <NavLink className='navs hvr-pulse' to='/'>
                                Home
                            </NavLink>
                        </li>
                        <li>
                            <NavLink className='navs hvr-pulse' to='/dev'>
                                Development
                            </NavLink>
                        </li>
                        <li>
                            <NavLink className='navs hvr-pulse' to='/media'>
                                Media
                            </NavLink>
                        </li>
                        <li>
                            <NavLink className='navs' to='/study-case'>
                                Study Case
                            </NavLink>
                        </li>
                    </ul>
                    <span className='bottom-slider'></span>
                    <div className='content'>
                        <Route exact path='/' component={Intro} />
                        <Route path='/dev' component={Development} />
                        <Route path='/media' component={Media} />
                        <Route path='/study-case' render={props => (<StudyCase {...this.state} showThumbnails={this.state.showThumbnails}/>)}/>
                    </div>
                </div>
            </HashRouter>
        );
  }
}

export default Main;

Может ли кто-нибудь из коллег указать на ошибку, которую я делаю со мной? Заранее благодарим за доступность.

Answer 1

После нескольких часов поиска решения я прибил его, и это было довольно основательно c, так что новичок ie мог найти ответ. Случилось так, что компонент <StudyCase/> имеет сам компонент, и там должно жить государство. Меня привели к ошибке логическое обоснование пакета галереи, с которым я работал ранее, когда нужно было управлять состоянием на той же странице маршрутизатора. Вот код компонента <StudyCase/> с рабочим состоянием, если кому-то может понадобиться в какой-то момент:

import ImageGallery from 'react-image-gallery';
import React from 'react';

class StudyCase extends React.Component {
    constructor() {
        super();
        this.state = {
            showThumbnails: false,
            showPlayButton: false,
            showFullscreenButton: false,
            showGalleryFullscreenButton: false,
        };
    }
    render() {
        return (
            <ImageGallery
                items={images}
                showThumbnails={this.state.showThumbnails}
                showPlayButton={this.state.showPlayButton && this.state.showGalleryPlayButton}
                showFullscreenButton={
                    this.state.showFullscreenButton && this.state.showGalleryFullscreenButton
                }
            />
            // <ImageGallery
            //          items={images}
            //          showThumbnails={this.state.showThumbnails} />;
        );
    }
}

const images = [
    {
        original: 'https://picsum.photos/id/1018/1000/600/',
        thumbnail: 'https://picsum.photos/id/1018/250/150/',
    },
    {
        original: 'https://picsum.photos/id/1015/1000/600/',
        thumbnail: 'https://picsum.photos/id/1015/250/150/',
    },
    {
        original: 'https://picsum.photos/id/1019/1000/600/',
        thumbnail: 'https://picsum.photos/id/1019/250/150/',
    },
];

export default StudyCase;