How to avoid reinstalling a component if it is necessary to update a URI (for example, a filter button)?

Question

Using react-router v3and redux, I basically have a route setup similar to the following:

<Route name="app" path="/" component={App}>
  <IndexRoute component={Catalogue} />
  <Route name="brand" path="/brand/(:brand)" component={Catalogue} />
</Route>

My catalog makes an asynchronous request to retrieve all my products, and then stores them in state. In addition, my Catalog component has several brand buttons using Linkfrom react-router, and each link looks like this:

• / brand / brand
• / brand / brandB
• / brand / brandC

When a user clicks the brand filter button, there is logic in the Catalog that filters and displays only products belonging to brandX as part of the URL parameters.

In the Directory component, I have something like the following:

componentDidMount() {
  if (this.props.params.brand) {
    // this is a redux action dispatch
    this.props.setBrandFilter(this.props.params.brand);
  }
}

: , , , ( .), ( .) ( !). , ( ).

, URL- , (, /brand/brandA ) , :

! - , ? !

Answer 1

, . , . , , .

• . , , . flux . ( ) .

• , , v4, - , . - , , , , " URL- -". - . , . , <Catalog> .

  <Route name="app" path="/" component={App}> <Catalog> <Route name="brand" path="/brand/(:brand)" component={BrandList} /> </Catalog> </Route>