Is it possible to create several routes in react-route for a different state of a component?

Question

React

There is a component in which elements from the api are rendered and I want to implement their filtering, let's say "red" and render only red and then green in the url "/red" and in the url "/ green" well, all url "/" , what's the problem: I don’t want to create 3 components and make routes on them, I just want 3 routes for the state of the container component, so that, by clicking on the button, a function is launched in which I pass only the necessary props into the container component through filter(), for example red, it renders them and in the url is added with "/ red"
PS: I'm not very good at routing yet and my question may seem stupid and stubborn to you (I think it is) but I'll be glad to hear any of your answers.

Answer 1

One route is enough for you:
The color parameter can be obtained from the component as 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);
    // ...    
  }
}