Страница не может быть загружена с номером страницы URL.Некоторая ошибка с: id carousel

Question

timtchoi.com

Я использую функции onClick для увеличения номера страницы.Я также использую номер страницы: id, чтобы выбрать мой gif для этой страницы.Но по какой-то причине при поиске по номеру страницы возникает ошибка, и страница не загружается.но это доступно при нажатии через кнопки.Я хочу прямые ссылки, и это показывает мои гифки.

     <BrowserRouter>
  <div>
    <Header />
      <Switch>
        <Route path ="/melee/falco/:id" component={MeleeFalco} />
        <Route path ="/melee/falcon/:id" component={MeleeFalcon} />
        <Route path ="/melee/marth/:id" component={MeleeMarth} />
        <Route path ="/melee" component={Melee} />

---

  import React, { Component } from 'react';
  import {browserHistory} from 'react-router';
  import {Link} from 'react-router-dom';
  import aLeft from '../melee/aLeft.png';
  import aRight from '../melee/aRight.png';

  export default class MeleeMarth extends Component {
    onNextButton(){
      this.props.match.params.id++;

      if(this.props.match.params.id === 9)
        this.props.match.params.id = 1;


 this.props.history.push(`/melee/marth/${this.props.match.params.id}`);
    }

    onPrevButton(){
      this.props.match.params.id--;

      if(this.props.match.params.id === 0)
        this.props.match.params.id = 8;


this.props.history.push(`/melee/marth/${this.props.match.params.id}`);
    }

    render() {


      return (
        <div className = "content text-center">
          <img src= {aLeft}
            onClick={this.onPrevButton.bind(this)}
            className="img-responsive" alt = "arrowBtn"/>


          <img src={require(`../melee/m${this.props.match.params.id}.gif`)}
            className="img-responsive" alt = "Combo"/>


          <img src={aRight}
            onClick={this.onNextButton.bind(this)}
            className="img-responsive" alt = "arrowBtn"/>
        </div>

      );
    }
  }