React -- Switch的使用

Switch的作用：Switch可以提高路由匹配效率(单一匹配)。

例:

import React, { Component } from 'react'
import {Route,Switch} from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' //About是路由组件
import Header from './components/Header' //Header是一般组件
import MyNavLink from './components/MyNavLink'
import Test from './pages/Test1'export default class App extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><Header/></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 原生html中，靠<a>跳转不同的页面 */}{/* <a className="list-group-item" href="./about.html">About</a><a className="list-group-item active" href="./home.html">Home</a> */}{/* 在React中靠路由链接实现切换组件--编写路由链接 */}{/* <NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink><NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink> */}<MyNavLink to="/about">About</MyNavLink><MyNavLink to="/Home">Home</MyNavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Switch><Route path="/about" component={About}/><Route path="/home" component={Home}/><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="abc" component={ABC} /><Route path="/Home" component={Test}/></Switch></div></div></div></div></div>)}
}

代码描述：

上述代码使用封装好的MyNavLink分别指向了

/about

/home

然后使用Route来设置对应的地址展示的路由组件

Switch作用体现：

由于路由的默认是多次匹配（既：通过for循环遍历一遍每个路由组件，找到所有对应该路径的路由组件来展，如果路由组件很多的话造成了效率过低）

这里用Switch包裹Route来实现单一匹配，既一个路由对应第一个该路由的路由组件。原理为遍历到该路由组件后，停止遍历。

React -- Switch的使用相关推荐

React路由---react-router-dom、获取路由参数、ant design ui组件、fetch发送请求（默认不能跨域）、Switch...
1.下载 yarn add react-router-dom --save 2.导入 import React from "react"; import { BrowserRout ...
[React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
React - antd4 中在form中为Switch赋值无效
项目场景: React - antd4; From表单问题描述: Switch赋初始值无效 # 解决方案: let newCheck = {};if (propsForm.type === 'swi ...
React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
React 路由 Switch 用法
回顾: NavLink 与封装 Navlink 1: NvaLink 可以实现路由链链接的高亮, 通过activeClassName 指定样式; 2: 标签体的内容是一个特殊的标签属性; 3: 通过t ...
React路由报错You should not use Switch outside a Router
修改方式用Router替换掉Switch import React, { Component } from 'react' import { BrowserRouter as Router, Rou ...
React学习16（Switch组件的使用）
作用通常情况下,path和component是一一对应的 Switch可以提高路由匹配效率(单一匹配,谁在前面,先匹配谁) 代码示例 import React, { Component } from ...
react native 组件之switch组件的用法
写项目需要用到RN的switch组件,在官方文档上大概看了下,主要讲的就是switch组件的一些样式,还有调用的方法:onValueChiange,但关于怎么切换开关,怎么调用等,都没有提到..无奈 ...
react（96）--switch做判断
list: (text, row) => {const list = [];switch (row.status) {case COURSE_STATUS_UPSHEFF:list.push({ ...

React -- Switch的使用

React -- Switch的使用相关推荐

最新文章

热门文章