作用

通常情况下，path和component是一一对应的

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/Test'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 active" href="./about.html">About</a><a className="list-group-item" href="./home.html">Home</a> */}{/* 在React中靠路由链接切换组件 */}<MyNavLink to="/about" title="About" >About</MyNavLink><MyNavLink to="/home" title="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= '/home' component={Test}/></Switch></div></div></div></div></div>)}
}

React学习16（Switch组件的使用）相关推荐

React学习二（组件详解）
文章目录一.React数据流二.组件的特性 1.属性(props) (1)React Props默认值与标签属性限制 (2)应用-React组件切分与提取 2.状态(state) (1)state ...
react学习—PureComponent纯组件
PureComponent纯组件一.PureComponent纯组件 1.任务列表 2.添加任务 3.性能优化 1.使用PureComponent 一.PureComponent纯组件纯组件用于避 ...
react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期接着(2)中的组件生命周期 1.运行阶段运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
react学习—高阶组件HOC
高阶组件HOC 一.高阶组件HOC 1.高阶组件 2.属性传递 3.使用属性传递 4.注意一.高阶组件HOC HOF:Higher-Order Function, 高阶函数,以函数作为参数,并返回一 ...
React 学习之父子组件传值
父组件可以通过props.原型方法向子组件通信,子组件可以通过回调函数.事件冒泡向父组件通信. 1. 父组件向子组件通信父组件向子组件传值之props方法: 父组件 import React fro ...
react学习(16)---getFieldDecorator赋值
<Row gutter={12}><Col span={12}><Form.Item label="名称">{getFieldDecorator ...
react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...

React学习16（Switch组件的使用）

作用

代码示例

React学习16（Switch组件的使用）相关推荐

最新文章

热门文章