React学习之旅----react-router

app.js

/*

  react路由的配置：
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

    2、安装  cnpm install react-router-dom --save


    3、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）


         <Router>

                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>


               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>


         exact表示严格匹配
         
*/
import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from './components/Home'
import News from './components/News'
import Product from './components/Product'
class App extends Component {
  render () {
    return (
      <Router>
        <div>
          {/* link路由跳转 */}
          <Link to="/">首页</Link>
          <Link to="/news">新闻</Link>
          <Link to="/product">商品</Link>
          <Route exact path="/" component={Home} />
          <Route path="/news" component={News} />
          <Route path="/product" component={Product} />
        </div>
      </Router >
    );
  }
}
export default App;

Home.js

import React from 'react'
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '首页'
    };
  }
  render () {
    return (
      <div>
        {this.state.title}
      </div>
    )
  }
}

export default Home

News.js

import React from 'react'
class Nem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '新闻'
    };
  }
  render () {
    return (
      <div>
        {this.state.title}
      </div>
    )
  }
}

export default Nem

Product.js

import React from 'react'
class Product extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '产品'
    };
  }
  render () {
    return (
      <div>
        {this.state.title}
      </div>
    )
  }
}

export default Product