Роутинг на тот же компонент react-router

У меня есть страница с описанием блюда. Текущий элемент записан в store. А так же я беру из store еще 4 похожих элемента и ставлю на них ссылки, однако нажимая на них не происходит перехода и строка адреса из /article/1 превращается, например, в /article/article/5.

Загрузка данных в компонент:

componentDidMount() {
        this.props.fetchDishById(this.props.params.id)
    }

Рендер похожих элементов:

renderSimilar(){
        const {similarDishes} = this.props
        return(
            <div className="list">
                {similarDishes.map((dish, index) => {
                    return(
                        <div key={index} className="list__wrap">
                            <Link to={`article/${dish.id}`} className="list__block">
                                <div className="list__img" style={{backgroundImage: `url('${dish.image}')`}}>
                                </div>
                            </Link>
                        </div>
                    )
                })}
            </div>
        )
    }

Работа с Connect:

const mapStateToProps = (state, ownProps) => ({
    dish: state.dishById,
    similarDishes: getSimilarDishes(state)
})
const mapDispatchToProps = {
    fetchDishById
}
export default connect(mapStateToProps, mapDispatchToProps)(Article)

Код с роутами приложения:

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route component={Layout}>
                <Route path={'/'} component={Articles}/>
                <Route path={'article/:id'} component={Article}/>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);

Код всего компонента: https://hastebin.com/beqijojide.scala