Можно ли в react-route зделать несколько роутов на разное состояние компонента?

Question

[m_frost]

Есть компонет в который рендеряться элементы из api и я хочу реализовать их фильтрацию припустим "красные" и рендер только красные а в url "/red" потом зеленые а в урл "/ green" ну и все url "/" , в чем проблема: я не хочу создавать 3 компонента и делать на них роути я хочу просто 3 роута на состояние компонента контейнера типо просто чтоб по клику на кнопку запускалась функция в которой я через filter() прокидаю в компонент контейнер только нужные пропсы например red он их рендирит а в урл прибавляется "/ red"
PS: я еще не очень хорошо освоил роутинг и возможно мой вопрос покажется вам тупым и упоротим (думаю так и есть) но я буду рад услышать любой вашу ответ.

Answer 1

[Антон Спирин]

Вам хватит одного роута:

<Route path="/some-path/:color" component={SomeComponent} />

Параметр color можно получить в компоненте как this.props.match.params.color:

class SomeComponent extends React.Component {
  render() {
    const { match, elements } = this.props;
    const { color } = match.params;    

    const filteredElements = elements.filter(el => el.color === color);
    // ...    
  }
}

Comments

[m_frost]

спасибо буду буду пробовать