Ошибка в роутинге, как исправить?

Question

[NickJon]

Мне нужно, чтобы у каждого клика был свой index. Я пытался что-то сделать, но видимо из-за map у меня некорректно все работает. Получается, если в map[1,2,3] то у меня в 3 раза больше элементов, чем нужно. Я не знаю, как сделать по-другому. Помогите, пожалуйста.

class ShowCardDescription extends React.Component {
  constructor(props) {
        super(props);
        this.state = {isToggleCard: true};
        this.handleClickCard = this.handleClickCard.bind(this);
    }


    handleClickCard() {
        this.setState({
            isToggleCard: !this.state.isToggleCard
        });
        this.props.handleClick()
    }
  
  render() {
    return (
      <div class='main'>
        <section>
          {this.props.isToggleOn && <div className='element' onClick={this.handleClickCard}/>}
        </section>
        {!this.state.isToggleCard && <div className='content'>
        <div onClick={this.handleClickCard}>
            <p className='close'>close</p>
        </div>
        {this.props.children}</div>}
      </div>
    )
  }
}

class Description extends React.Component {
  render() {
    return (
      <div>
        <p>some text here</p>
      </div>
    )
  }
}


class MainContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: true
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            isToggleOn: !this.state.isToggleOn
        });
    }

    render() {
        return [1,2,3].map((index) => {
          return (
            <BrowserRouter>
              <div id="tabs-content">
                <Link to={'/event/' + index}>
                    <ShowCardDescription isToggleOn={this.state.isToggleOn} handleClick={this.handleClick}>
                      <Switch>
                        <Route path='/event/:index'>
                          <Description />
                          <Description />
                          <Description />
                        </Route>
                      </Switch>
                    </ShowCardDescription>
                  </Link>
                </div>
             </BrowserRouter>
        )
      })
    }
}

ReactDOM.render(
  <MainContent />, 
  document.getElementById('root')
);

Comments

[Павел Диденко]

Вы вообще в курсе, что написали в роутах? Прочитайте медленно и внимательно

[NickJon]

Павел Диденко, Я не вижу своих ошибок. Можете сказать, пожалуйста? :с
Я еще новичок и документация сложно дается

[Павел Диденко]

Во первых, отдельно зарегистрируйте роуты. У вас он один, а в мапе делайте несколько табов с ссылками на /event/${index}

Сейчас же вы создаете в массиве 3 роутера, внутри лежат одинаковые роуты /index/.
То есть в файле роутера у вас должно быть:

<BrowserRouter>
  <Route path="/event:index" component={'Какой-то ваш компонент"} />
</BrowserRouter>

А в другом файле создавайте уже ссылки на роут:

render() {
        return [1,2,3].map((index) => {
          return (
              <div id="tabs-content">
                <Link to={'/event/' + index}>Какой-то контент</Link>
                </div>
        )
      })
    }