Develop Reference

React router order of routes, does it matter?

I set up my react router like this:
<Route exact path="/users">
<component/>
</Route>
<Route exact path="/users/:id">
<component/>
</Route>
And it wasn't working correctly (url was changing but content wasn't)
after I changed the order of Route in my Routes.js (the one with :id first) it started working. Do it matters or there is other problem somewhere in my code?

Yes you need to check
Route and
Switch
<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.
Read and explore more at https://reactrouter.com/web/api/Switch

Yes, nested routes should be above its parent.
So in the following code, about/user has to be above /about. If its beneath then only /about will render
<Route path='about/user' />
<Router path='about/' />

Basic React Router Setup
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>

What exactly is <switch> used for in React Router?

I am new to React learning , and was trying to build an app using react-router-dom. I was able to implement basic routing when I came across the term 'switch'. Can anyone please explain me with a use-case example where we use switch and what is its use?

Since you are new am going to take a bit more time to explain with examples and also add some few things about it you may want to have handy.
So like Iddler said, Switch is more or less like the "Switch case" condition in any other languages but usually ends with the first match it finds.
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component="{About} />
</Switch>
That is an example of its most basic use. Switch determines the start and end of the block or condition. Each Route checks for the current path. supposing we were working on "www.test.com". All of "www.test.com" is the root "/". So the Route checks for the path after the root. so if you had "www.test.com/home", "/home" comes after the root so the "Home" component will be loaded in our example above and if you had "www.test.com/about" the "About" component is loaded.
Be mindful that you can use any names. the components and paths do not need to be the same.
There are also cases when you might want to use exact to match an exact path. this is useful when you have similar paths. eg "/shop" and "/shop/shoes". using exact ensures Switch matches exact paths and not just the first.
Eg:
<Switch>
<Route exact path="/shop" component={Shop} />
<Route exact path="shop/shoes" component="{Shoes} />
</Switch>
You can also use <Route... /> without the <Switch>.
Eg:
<Route path="/home" component={Home} />
so unlike direct component loads where you just load a component like <Home /> Routers work with the URLs.
Lastly, the <Route... /> path can take arrays of url to load same component.
Eg:
<Switch>
<Route path={[ "/home", "/dashboard", "/house", /start" ]} component={Home} />
<Route exact path={[ "/about", "/about/management", "/about/branches" ]} component="{About} />
</Switch>
I hope this helps. Let me know if you need clarifications of any sort. :)
UPDATE:
You are not required to write Routers in this same format always. below is another format you could use;
<Router>
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>
There are instances like am in now where you want to be able to handle what shows when a wrong URL is entered. like a 404page. you could use Router without a path. so like a regular switch statement, that becomes your default.
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component="{About} />
<Route component="{PageNotFound} />
</Switch>

Switch looks through Route's children and renders the first one that matches the current path, once it does it will not look for any other matches.

The Switch component will work much in the same way as the Router component, meaning we will still have nested Route components that need exact paths, etc.
The added functionality of Switch is that it will only render the first matched child. This is really handy when we have nested routes such as the below:
<Switch>
<Route path="/accounts/new" component={AddForm} />
<Route path={`/accounts/:accountId`} component={Profile} />
</Switch>
Say we put the above code in a component — we would see that both {AddForm} and {Profile} would render, since “/accounts/new” could look like either Route to a Router component. Router components render inclusively of all route matches. The Switch component will render exact matches, and only the exact match. This makes it ideal for these nested scenarios.

Setting priority in order of paths with react-router

My routing looks like this
<Route path="account" component={Page1}>
<Route path="new" component={Page2}/>
<Route path="(:userId)" component={Page1}/>
</Route>
Whenever I go to account/new it defaults to the (:userId) path and directs me to Page1 treating 'new' as the optional parameter. How can I make it default to Page2?
I am using V3 of react-router

It is going to Page1 because account needs to be an exact path. Since it isn't, when you go to account/new it will show the component for account. Try this:
<Route exact path="/account" component={Page1}>
<Route path="/new" component={Page2}/>
<Route path="/(:userId)" component={Page1}/>
</Route>

React Router and route params

I've had a browse and I couldn't find anything solving this for me. I've got a problem with a routing requirement that I've got within my SPA. There is an optional parameter in the middle of a URL. For example, I would like both this:
/username/something/overview
and
/username/overview
To resolve to the same thing.
First Attempt
I first tried to use the parenthesis to mark this as an optional parameter.
<Route path='/:username(/:shard)' component={ProfileContainer}>
<IndexRoute component={OverviewContainer} />
<Route component={MatchHistoryContainer} path='/:username/(/:shard)/history' />
<Route component={DailyTrendsContainer} path='/:username/(/:shard)/trends' />
</Route>
However, the outcome of this is that username/history resolves to the root, because it thinks 'history' is the value of the shard routing parameter. So username/something/overview worked with this, but username/overview no longer worked.
Attempt 2
I took another run at it, by defining a whole new set of routes in the routing definition:
<Route path='/:username' component={ProfileContainer}>
<IndexRoute component={OverviewContainer} />
<Route component={MatchHistoryContainer} path='/:username/history' />
<Route component={DailyTrendsContainer} path='/:username/trends' />
<Route path='/:username/:shard' component={ProfileContainer}>
<IndexRoute component={OverviewContainer} />
<Route component={MatchHistoryContainer} path='/:username/:shard/history' />
<Route component={DailyTrendsContainer} path='/:username/:shard/trends' />
</Route>
</Route>
I put the history and overview routes above the ones with the optional parameters so that they would resolve first. I then declared the additional routes with the parameter (but this time not marked as optional) so it would resolve to those after it had tried the ones I wanted.
With this approach, history and overview worked a treat! However, the urls with the shard parameter in them no longer worked, and resulted in a loop, because whenever it tried to render out, it failed.
I was wondering if there is an idiom or someone with a little more experience of react router could point out something obvious I'm missing?

Yes we can put the optional params in the middle of the url, like this way:
<Route path='/test' component={Home}>
<Route path='/test(/:name)/a' component={Child}/>
</Route>
don't use the / after test it will be the optional params for Home.
In ur 1st case just remove the / after username, it should work, try this:
<Route path='/:username(/:shard)' component={ProfileContainer}>
<IndexRoute component={OverviewContainer} />
<Route component={MatchHistoryContainer} path='/:username(/:shard)/history' />
<Route component={DailyTrendsContainer} path='/:username(/:shard)/trends' />
</Route>

Are Route names supposed to be unique?

Using react-router v0.12.4.
Are Route names supposed to be unique? The following doesn't seem to work.
<Route name='app' path='/' handler={MainApp} >
// instead of DefaultRoute, we use path matching
<Route path="/" name="dashboard" handler={Dashboard}>
<DefaultRoute name="main" handler={DashboardMain}/>
<Route name='settings' handler={DashboardSettings} />
</Route>
<Route name='settings' handler={AppSettings} />
</Route>

As per https://github.com/rackt/react-router/issues/890#issuecomment-76475626, a maintainer has clarified that Route names are unique:
Yes, they are supposed to be unique. We used to warn you about it.. we
should probably still do that.