页面无法加载页码URL。 ：id carousel

Question

timtchoi.com

我使用onClick函数来增加页码。我也使用：id页码选择该页的gif。但是由于某种原因，当您搜索页码时，会出现错误并且无法加载页面。但是在单击按钮时可以访问它。我想要直接链接，并显示我的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>

      );
    }
  }