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(
  <App />
  , 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(
      <Router>
        <div style={{height:'100%'}}>
          <h1 style={MyCss.h1}>React路由基础</h1>
          <div style={MyCss.mNav}>
            <Link to='/' style={MyCss.navItem}>首页</Link>
            <Link to='/page1' style={MyCss.navItem}>页面1</Link>
            <Link to='/page2' style={MyCss.navItem}>页面2</Link>
            <Link to='/page3' style={MyCss.navItem}>页面3</Link>
          </div>
          <div style={MyCss.mainCss}>
            <Switch >
              <Route exact path='/' >
                <Home/>
              </Route>
              <Route path='/page1' >
                <Page1/>
              </Route>
              <Route path='/page2' >
                <Page2/>
              </Route>
              <Route path='/page3' >
                <Page3/>
              </Route>
            </Switch>
          </div>
        </div>
      </Router>
    )
  }
}

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

import React from 'react'

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

4、效果