1. We have the following routes defined:

<BrowserRouter>
  <Route path="/" component={HomePage} />
  <Route path="/search" component={SearchPage} />
</BrowserRouter>

What component(s) will be rendered when the / location is entered in the browser?

HomePage 

What about when the /search location is entered in the browser?

Both HomePage and SearchPage

2. We have the following routes defined:

<BrowserRouter>
  <Switch>
    <Route path="/" component={HomePage} />
    <Route path="/search" component={SearchPage} />
  </Switch>
</BrowserRouter>

What component(s) will be rendered when the / location is entered into the browser?

HomePage 

What about when the /search location is entered into the browser?

HomePage 

3. We have the following routes defined:

<BrowserRouter>
  <Switch>
    <Route path="/search" component={SearchPage} />
    <Route path="/" component={HomePage} />
  </Switch>
</BrowserRouter>

What component(s) will be rendered when the / location is entered in the browser?

HomePage 

What about when the /search location is entered in the browser?

SearchPage 

4. In our Q and A app, we want a /login path to navigate to the sign-in page as well as the /signin path. How can we implement this?

We can do the following:

<Redirect from="/login" to="/signin" />

5. We have the following routes defined:

<BrowserRouter>
  <Switch>
    <Route path="/search" component={SearchPage} />
    <Route path="/" component={HomePage} />
    <Route component={NotFoundPage} />
  </Switch>
</BrowserRouter>

What component(s) will be rendered when the /signin location is entered in the browser?

HomePage

6. We have the following routes defined:

<BrowserRouter>
  <Switch>
    <Route path="/" component={HomePage} />
    <Route path="/search" component={SearchPage} />
    <Route component={NotFoundPage} />
  </Switch>
</BrowserRouter>

With the preceding implementation, when a user navigates to the /search path or an invalid path such as /unknown, the HomePage component is rendered.

How can we change the code to render HomePage when only the / path is entered in the browser?

We can do the following:

<Route exact path="/" component={HomePage} />

7. We have the following route defined:

<Route path="/users/:userId" component={UserPage} />

How can we reference the userId route parameter in the UserPage component?

If we make the props type for UserPage RouteComponentProps<{ userId: string }>, then props.match.params.userId will hold the userId route parameter.