React自学笔记（十）---react路由基本配置

首先是对于根页面的设置App.js：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  //Switch,
  Route,
  Link
} from "react-router-dom";

import './assets/css/App.css';
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  //render 模板   jsx
  render() {
    return (
      <Router>
        <div>

          <header className="title">
          <Link to="/">首页</Link>
          <Link to="/news">新闻</Link>
          <Link to="/product">商品</Link>
          </header>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/news">
            <News />
          </Route>
          <Route path="/product">
            <Product />
          </Route>
        </div>
      </Router>
    )
  }
}

export default App;

路由需要安装：cnpm insatall react-router-dom --save
下面分别是其他子页面的设置：
Home.js：

import React, { Component } from 'react';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
               <h2>我是home组件</h2> 
            </div>
        );
    }
}

export default Home;

News.js：

import React, { Component } from 'react';
class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                我是新闻组件
            </div>
        );
    }
}

export default News;

Product.js：

import React, { Component } from 'react';
class Product extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>我是商品组件</div>
        );
    }
}

export default Product;

需要的话可以在css里面对于title类进行样式定义