zoukankan      html  css  js  c++  java
  • react-router基本用法

    1.引入

    $ yarn add react-router-dom
    import {HashRouter as Router,Route,Link} from 'react-router-dom';
    

      

    2.配置

    ReactDOM.render(
    		<Router>
    			<Wrapper>
    				<Route path='/a' component={A}/>
    				<Route path='/b' component={B}/>
    			</Wrapper>
    		</Router>,
    	document.getElementById('app')
    )
    

      

    3.使用

    //容器
    class Wrapper extends React.Component {
    	constructor(props){
    		super	(props)
    	}
    
    	render() {
    		return (
    			<div>
    				<Link to='/a'>组件A</Link> <br/>
    				<Link to='/b'>组件B</Link>
    				{this.props.children}
    		 </div>
    		)
    
    	}
    }
    

    4.显示

    5.完整代码

    import React from 'react';
    import ReactDOM from 'react-dom';
    // import {BrowerRouter as Router,Switch,Route,Link} from '';
    import {HashRouter as Router,Route,Link} from 'react-router-dom';
    // import Home from 'page/home/index.jsx';
    class A extends React.Component {
    	constructor (props){
    		super	(props)
    
    	}
    	render(){
    		return <div>component A</div>
    
    	}
    }
    class B extends React.Component {
    	constructor (props){
    		super	(props)
    	}
    	render(){
    		return <div>component B</div>
    
    	}
    }
    //容器
    class Wrapper extends React.Component {
    	constructor(props){
    		super	(props)
    	}
    
    	render() {
    		return (
    			<div>
    				<Link to='/a'>组件A</Link> <br/>
    				<Link to='/b'>组件B</Link>
    				{this.props.children}
    		 </div>
    		)
    
    	}
    }
    
    ReactDOM.render(
    		<Router>
    			<Wrapper>
    				<Route path='/a' component={A}/>
    				<Route path='/b' component={B}/>
    			</Wrapper>
    		</Router>,
    	document.getElementById('app')
    )
    

      

  • 相关阅读:
    第七课——iOS数据持久化
    第三章-动态规划
    IOS第五课——Gesture and TableView
    第六课——UIDynamicAnimator
    文本居中换行、边框设置
    属性优先级、图片属性设置、内联标签设置大小
    打开、悬浮、访问、点击、状态用:
    属性选择器用【】
    组合使用用逗号,
    3种选择器的使用方式
  • 原文地址:https://www.cnblogs.com/ipoodle/p/9690289.html
Copyright © 2011-2022 走看看