react路由使用

1：插件添加

 cnpm install react-router-dom  -S

2：app.js书写

import React, { Component } from 'react';
//路由的2种形式： hash(HashRouter) , H5的historyApi(BroswerRouter)是路由的容器，是组件，要包在路由的外面
import { HashRouter as Router,Route} from 'react-router-dom'
function Home() {
    return  
首页
}
function Profile() {
    return  
个人中心
}
function User() {
    return  
用户中心
}


class App extends Component {
  render() {
    return (
      
          

              {/*exact确切为/时，才会匹配。否则在下面2个路由中，都会显示第一个路由*/}
              '/' exact={true}  component={Home}>
              '/profile'} component={Profile}>
              '/user'} component={User}>
          
      
    );
  }
}

export default App;

3：组件使用方法
（1）项目基本结构，其他Profile, User模块跟home模块基本一致

（2）app.js使用

import React, { Component } from 'react';
//路由的2种形式： hash(HashRouter) , H5的historyApi(BroswerRouter)是路由的容器，是组件，要包在路由的外面
import { HashRouter as Router,Route} from 'react-router-dom'
// import {Home} from './containers/Home',写法错误，错误原因如下解释
import Home from './containers/Home'
import Profile from './containers/Profile'
import User from './containers/User'


class App extends Component {
  render() {
    return (
      
          

              {/*exact确切为/时，才会匹配。否则在下面2个路由中，都会显示第一个路由*/}
              '/' exact={true}  component={Home}>
              '/profile'} component={Profile}>
              '/user'} component={User}>
          
      
    );
  }
}

export default App;