React Router - state in URL

[0llieW]

I am using React Router for the first time.

I am building a styleguide app. I have two dropdown components where a user can choose both a brand and a component - the app will then display the chosen component branded according to the selected brand. I want both of these options to be included in the URL.
I am not totally sure when to use URL parameters vs query string, and I don’t know anything about the best practices of URL design, but I had in mind something like sitename/componentname/brandname.
Both the brandname and the component name will be saved in state. The chosen brand will alter some CSS variables while the component name will change the displayed component.

I’ve got it working for the component name e.g.

<Route path="/button" component={Button} />
<Route path="/card" component={Card} />

What I don’t get is how to then have another bit in the URL after that?

Am I going about this the right way?

I am using the latest version of React and React Router.

[mawburn]

Parameters and query strings are the same thing, there’s really no doctrine when to use one or the other. There are even schools of thought that say how the url is designed is completely meaningless.

React Router Docs Moved

They have a pretty good example there. But, I personally don’t like passing in the whole match object to the view component, so I do something like this:

<Route
  path="/order/:direction(asc|desc)"
  component={() => <ComponentWithRegex direction={match.params.direction} />}
/>