At the moment, if you serve the application, nothing would have changed – we've simply wrapped our app in BrowserRouter so that inside <BrowserRouter> we can define route matching components. Let's suppose we want the <RegistrationForm> component to only render when the route is /register, we can use a <Route> component:

...
import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render((
  <BrowserRouter>
    <Route exact path="/register" component={RegistrationForm} />
  </BrowserRouter>
), document.getElementById('renderTarget'));

The <Route> component usually uses two props – path and component. If a <Route> component has a path prop that matches the current URL's path name (such as window.location.pathname), the component specified in the component prop will be rendered.

Matching is done in an inclusive fashion. For instance, the pathnames /register/user, /register/admin, and register will all match the path /register. However, for our use case, we want this element to show only if the path matches exactly, and so we are using the exact prop.

After making the change, let's serve the application again.