How to set exact path along with dynamic param using react router?

React router is a cool component to handle URL routing in react world. We can configure the router switch in a way that so that it supports both the exact path route and dynamic route.

In one of the use cases, we had to all dynamic routes along with a few exact path routes.

  <BrowserRouter>
    <Switch>
      <Route path="/thankyou" exact component={Thankyou}></Route>
      <Route path="/:slug" component={Home}></Route>
      <Route path="/" exact component={Home}></Route>
    </Switch>
  </BrowserRouter>

In the above example, if the URL has /thankyou then it should go to Thankyou component. Anything other than thankyou after the slash (/9-for-9-dollar) should go to the home component.

We will have to make sure that we place the exact route before the dynamic route because if react finds a match it goes to the corresponding component and does not check routes under that.

Good read:
https://reacttraining.com/blog/react-router-v5/
https://github.com/ReactTraining/react-router