React third-party component 1 (use of router for routing management ② multiple-level jumps and redirects)

This tutorial is a total of 6, daily update one, please pay attention to us! You can go to historical news to view previous articles, and also please look forward to our new articles!

1, React third party component 1 (Routing management router use ① simple use)---2018.01.22

2, React third party component 1 (Routing management router use ② multi-level jump and redirect)---2018.01.23

3. React third party component 1 (router of routing management ③)---2018.01.24

4. React third party component 1 (use of router for routing management ④ on-demand loading)---2018.01.25

5. React third party component 1 (use of router for routing management ⑤ on-demand loading-under)---2018.01.26

Development environment: Windows 8,node v8.9.1,npm 5.5.1,webstorm 2017.2.2

There are routes under the route and how to implement them.

Today, the implementation of multi-level reasons and how to redirect.

For example, we need to implement, DEMO2, there are two pages below demo2-1, demo2-2

We open the Demo2 below the INDEX.JSX page to modify the code as follows:

' React ';
'./todolist ';
' React-router-dom '

Index = () =>
<div>
<div classname= "NAV" >
<navlink to= "/demo2/demo2-1" Activeclassname= "selected" exact>demo2-1</navlink>
<navlink to= "/demo2/demo2-2" Activeclassname= "selected" exact>demo2-2</navlink>
</div>
<route path= "/demo2/demo2-1" component={todolist}/>
<route path= "/demo2/demo2-2" component={todolist}/>
</div>
;

Index;

We'll look at the browser effect.

has been implemented, but we have found a problem:

When you click on Demo2, the page is blank.

We want him to select demo2-1 by default, which is redirect to Demo2-1

We optimize the following code:

Introduction of Redirect

' React-router-dom '

Join

<route exact path= "/demo2/"
render={() => (<redirect to= "/demo2/demo2-1"/>)}/>

Look at the browser effect

Well, it has been achieved.

But also found a problem, Demo2, did not turn red, we hope that demo2, is turned red.

Let's change the code again:

This time you need to modify the home route, as follows:

Remove Exact property

<navlink to= "/demo2" Activeclassname= "selected" >demo2</NavLink>

Look at the browser again

OK implementation.

Let's refine the code again:

There are many of the same level names that can be optimized.

Here I print the match to give you a more intuitive understanding of what match is

The end of this article

No unauthorized reprint, if you need to reprint, please message in the public number contact us!

Thanks for the support of children's shoes!

If you have any questions, you can leave a message to US below!