react-router4简易示例教程

搜了好多react-route4r教程，都没有个简单完整的路由跳转示例，还不如简单粗暴的来个怎么用的示例！上代码！

import React from 'react';
// 用花括号引入react-router-dom的4个方法。你也可以安装react-router。
import {Switch,Link,Route,BrowserRouter} from 'react-router-dom';

export default class App extends React.Component{ // es6语法
  render(){
    return(
    <BrowserRouter>{/* react-router-dom方法里有BroserRouter和HashRouter ,自行选一个使用,把整个项目包起来就行了*/}
      <div>{/*一定要有个标签将路由组件包起来*/}
        <ul>
         <li><Link to="/">首页</Link></li> {/*Link相当于a标签 这里的to和Route的path对应*/}
         <li><Link to="/about">关于</Link></li>
         <li><Link to="/topics">主题列表</Link></li>
        </ul>
      <hr/>
      <Switch> {/*Switch可有可无，加上可以更清晰的表现为一组路由*/}
        <Route exact path="/" component={Home}/>{/*component是你要切换显示的组件*/}
        <Route path="/about" component={About}/>
        <Route path="/topics" component={Topics}/>
      </Switch>
      </div> 
    </BrowserRouter>   
    )   
  }
}

这是路由里的显示的三个组件

class Home extends React.Component{
  render(){
    return(
      <h1>
        home
      </h1>
    )
  }
}
class About extends React.Component{
  render(){
    return(
      <h1>
        about
      </h1>
    )
  }
}
class Topics extends React.Component{
  render(){
    return(
      <h1>
       topics
      </h1>
    )
  }
}

效果：

赶紧自己试试吧！