Translation:

<Switch>

Render the first

or

element matched by location as a child

What’s the difference between using

packages and just using a dozen

s?


is unique because it only renders one path. By contrast (without

wrapping), every

matched by location will be rendered. Consider the code shown in Figure 1-1:


If the URL is /about, then < about >,

, and

will all be rendered because their paths are all matched. This design allows us to build our application through

s in many ways, such as sidebars and Breadcrumbs, Bootstrap Tabs, etc.


Sometimes, however, we just want to selectively render a

. If the URL is /about we don’t want to also match /:user (or show us a 404 page). See Figure 1-2 to see how

is used to handle this problem:

Now, if the URL is /about,

will start looking for a matching

.
will be matched, then

will stop matching and render < about >. Similarly, if the URL is/Michael,

will be rendered.



Talk about:

Careful students will find that

in Figure 2 has an exact attribute. What is it? Let’s leave the question open and move on.

I prefer not to use

because I want to give it a try. See the pictures below

Code:

Figure 2-1 Running result 1:

Figure 2-2 Running result 2:

As shown in Figure 2-2, page 1 is rendered normally because “/” only matches

where path=”/”. However, as shown in Figure 2-3, “/second” matches the

of path=”/” and then the

of path=”/second/”, rendering both pages 1 and 2.


Finally, after freestyle, it was discovered that the pit did need to be filled with

. So, code tweaks, and look at the next set of diagrams

Code:

Figure 2-5 Running result 4:

<Switch>
<Route>

To verify this, adjust the order of the two, see the following set of pictures

Code:

Operation Result five:

<Switch>

Remember that

in the first sentence of “chat” has an exact attribute? In fact, anyone who has been to primary school knows it is the Chinese word for “precision”.

will be rendered only if the URL is exactly the same as the

path attribute after adding exact attributes.


What if we combine

with the exact attribute? Look at the last set of pictures

Code: