react -- router 使用（1）

create-react-app脚手架所建文件的App.js中进行书写相关代码：

APP.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './App.css';
//定义组件的三种方式
// 1
class Home extends Component{
  render(){
    return (
        <div>这里是主页</div>
      );
  }
}
// 2
// 箭头函数(注意，这里为圆括号)
const News = ()=>(
  <div>这里是新闻页</div>
);
//3 普通函数
const About = function(){
  return (
      <div>这里是关于信息</div>
    )
}
class App extends Component {
  render() {
    return (
      /*路由要用Router标签包起来*/
      <Router>
        {/*要有一个根元素*/}
        <div>
          {/*to后为地址相对于当前地址而言*/}
          <Link to='/'>首页</Link>
          <Link to='/News'>新闻</Link>
          <Link to='/About'>关于</Link>
          {/*对应内容放在Route中 path为对应路径  component为对应组件 exact为严格匹配，只匹配路径为'/'的元素*/}
          <Route exact path='/' component={Home} />
          <Route path='/News' component={News} />
          <Route path='/About' component={About} />
        </div>
      </Router>
    );
  }
}

export default App;