Получите идентификатор клика от родительского к дочернему элементу с помощью ReactJs

Я разрабатываю приложение на ReactJs, и теперь мне нужно передать идентификатор клика со страницы Main.js в Диван.js, который будет отображать различную информацию в зависимости от того, какой идентификатор вы только что нажали. У меня мой мин полностью отформатирован на PHP, я бы хотел, чтобы у ReactJs была глобальная переменная вроде $ _GET ahah. Может быть, это так, просто не сейчас. Я искал и не нашел то, что ищу. Я покажу код ниже. Код Main.js без импорта:

export class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            models: [],
            offset: offset,
            limit: limit
        };
    }

    componentDidMount() {

        /* Some code not relevant to the question, for getting API token */

        fetch('url/couch-model?offset=' + offset + '&limit=' + limit, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw Error(res.statusText);
            }
        }).then(json => {
            this.setState({
                models: json.results,
                isLoaded: true
            }, () => { });
        })    
    }

    render() {

        const { isLoaded, models } = this.state;

        if (!isLoaded) {

            return (
                <div id = "LoadText">
                    Loading...
                </div>
            )

        } else {

            return (
                <div>

                    {models.map(model =>
                        <a href = {"/sofa?id = " + model.id} key = {model.id}>
                            <div className = "Parcelas">
                                <img src = {"url" + model.image} className = "ParcImage" alt = "sofa" />
                                <h1>{model.name}</h1>

                                <p className = "Features">{model.brand.name}</p>

                                <button className = "Botao">
                                    <p className = "MostraDepois">Ver Detalhes</p>
                                    <span>+</span>
                                </button>
                                <img src = "../../img/points.svg" className = "Decoration" alt = "points" />
                            </div>
                        </a>
                    )}

                    <PageButtons offset = {offset} />

                </div>
            )
        }
    }
}

Как вы можете видеть, <a> внутри второго возврата отправляет идентификатор, хотя я не уверен, что это правильный путь. Я попытался написать это route-js путь, подобный этому /sofa/:id, но каким-то образом CSS внутри / диван / 1 перестал работать, независимо от идентификатора.

Теперь код Sofa.js, без импорта и только соответствующий код:

export class Sofa extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            model: {}
        };
    }

    componentDidMount() {

        fetch(url + '/couch-model/1{/*this show be id clicked and sent by url*/}/', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw Error(res.statusText);
            }
        }).then(json => {
            this.setState({
                model: json,
                isLoaded: true
            }, () => {});
        })
    }

    render() {

        const { model, isLoaded } = this.state;

        if (!isLoaded) {

            return (
                <div id = "LoadText">
                    Estamos a preparar o seu sofá!
                </div>
            )

        } else {

            return (
                <div id = "Esquerda">    
                    <h2>{model.area_set.map(area => area.name)}</h2>    
                    <h1>{model.name}</h1>
                    <p>Highly durable full-grain leather which is soft and has  a natural look and feel.</p>    
                    <h3>Design</h3>
                    <h4>Hexagon</h4>
                </div>
            );

        }

    }

}

Также вот route.js:

const Routes = (props) => (
    <BrowserRouter>
        <Switch>
            <Route path='/sofa/:id' component = {Sofa}/>
            <Route path='/home' component = {Home}/>
            <Route path='*' component = {NotFound}/>            
        </Switch>
    </BrowserRouter>
);

export default Routes;