What is the usage of switch in react

WBOY
Release: 2022-05-05 10:21:14
Original
3739 people have browsed it

In react, switch is used to ensure that the route only renders one path, and is used to solve the unique rendering of the route; when using the "" package, it will stop after matching a path. Rendering, if you do not use the "" package, each matched "" will be rendered.

What is the usage of switch in react

The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.

What is the usage of switch in react

Every matched will be rendered, wrapped with , only one path will be rendered

In order to solve the unique rendering of route, it is to ensure that the route only renders one path.

is unique because it only renders one path. When it matches a path, it stops rendering. In contrast (without the package), every matched by location will be rendered.

If

<Router history={history}>
    <Switch>
        <Route path=&#39;/home&#39; render={()=>(<div>首页</div>)}/>
        <Route path=&#39;/home&#39; component={()=>(<div>首页</div>)}/>
    </Switch>
</Router>
Copy after login

What is the usage of switch in react

If

<Router history={history}>
    <Route path=&#39;/home&#39; render={()=>(<div>首页</div>)}/>
    <Route path=&#39;/home&#39; render={()=>(<div>首页</div>)}/>
</Router>
Copy after login

What is the usage of switch in react

# is not configured ##Recommended learning: "

react video tutorial"

The above is the detailed content of What is the usage of switch in react. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template