ReactJ를 사용하여 부모에서 자식 요소로 클릭 된 ID 가져 오기

나는 ReactJs에서 응용 프로그램을 개발하고 있어요 지금은에서 클릭 된 ID 전달해야 Main.js의 페이지를 Sofa.js 그냥 클릭하는 ID에 따라 다른 정보를 표시하는 것이다. 내 밍은 모두 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>두 번째 반환은 올바른 방법인지 확실하지 않지만 ID를 보냅니다. 내가 쓰려고 시도한 것은 route-js와 같은 경로 /sofa/:id이지만 어쨌든 / sofa / 1 내부의 CSS는 ID가 무엇이든 작동을 멈췄습니다.

이제 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;