ReactJS - Динамические маршруты

Question

У меня есть эти компоненты.Я хочу превратить каждый <House/> в динамический URL.Например, при доступе в браузере http://localhost:3000/houses/house/1 я хочу отобразить Дом 1.

Остальные вещи в приложении работают нормально.Я просто хочу решить эту проблему реализации динамических маршрутов.

Компонент маршрутизатора

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import App from './App'   
import Houses from './Houses'    

export default props => (
  <Router>
    <Route exact path='/' render={() => <App />} >       
      <Route exact path='/houses' render={() => <Houses />} />
    </Route>
  </Router>
)

Компоненты домов

import React, { Component } from 'react'
import House from './House'

var data = require('./db.json');

class Houses extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentHouse: []
    };
  }

  componentDidMount() {
    this.setState({    
      currentHouse: data[0]    
    })
  }

  render() {
    const {currentHouse} =  this.state;           
    return (
      <div className="content house">     
        <ul>
        {currentHouse.photos && currentHouse.photos.map((photo, index) => {
          return(
           <House photo={photo} key={index}/>
          )
        })}
      </ul>
      </div>
    )
  }
}

export default Houses

Дом Компонент

import React from 'react';

function House(prop) {
  return (
    <li><img src={`/images/${prop.photo}`}/></li>
  );
}

export default House;

Answer 1

<Route exact path='/houses/:id' render={(props) => <House {...props} />} />

и внутри компонента Дом получить идентификатор:

prop.match.params.id

Ссылка: https://scotch.io/courses/using-react-router-4/route-params