React学习——路由的基础用法

1、创建React项目

参考连接：使用yeoman创建React项目

2、安装路由

cnpm i react-router -S
cnpm i react-router-dom -S

3、建立如下文件

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './pages/app'

ReactDOM.render(
  
  , document.getElementById('app')
);

src/pages/app.js

import React from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom'
import Home from '../pages/home'
import Page1 from '../pages/page1'
import Page2 from '../pages/page2'
import Page3 from '../pages/page3'

const MyCss = {
  h1:{
    height:'50px',
    backgroundColor:'#eee',
    textAlign:'center',
    margin:'0'
  },
  mNav:{
    display:'flex',
    flexDirection:'row',
    justifyContent:'center'
  },
  navItem:{
    flex:'1 0 auto',
    lineHeight:'25px',
    textAlign:'center',
    textDecoration:'none',
    color:'#fff',
    backgroundColor:'#216eaa'
  },
  mainCss:{
    position: 'absolute',
    width:'100%',
    top:'75px',
    bottom:'0',
    backgroundColor: '#8db5b1',
    display: 'flex',
    justifyContent:'center',
    alignItems:'center'
  }
}

export default class App extends React.Component {
  render(){
    return(
      
        

          
React路由基础
          

            首页
            页面1
            页面2
            页面3
          
          

            
              
                
              
              
                
              
              
                
              
              
                
              
            
          
        
      
    )
  }
}

src/pages/home.js         page1、page2、page3跟home差不多 知识改了几个文字

import React from 'react'

export default class Home extends React.Component {
  render(){
    return(
      
首页
    )
  }
}

4、效果