（三）react-router-dom 路由

• 安装

cnpm  install  react-router-dom  --save

• app.js引入

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

• 写上跳转

<Router>
      <div>
      <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/detail">Detail</Link>
          </li>
        </ul>
        <hr />     
          <Route exact path="/" component={Home} />          
          <Route exact path="/detail" component={Detail} />
      </div>
    </Router>

（自行创建一个Detail组件）
app.js

import React from 'react';
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
import './asset/css/App.css';
import Home from "./component/home";
import Detail from "./component/detail";

function App() {
  return (
    <div className="App">
     <Router>
      <div>
      <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/detail">Detail</Link>
          </li>
        </ul>
        <hr />     
          <Route exact path="/" component={Home} />          
          <Route exact path="/detail" component={Detail} />
      </div>
    </Router>
    </div>
  );
}

export default App;

home组件

import React, { Component } from 'react';

class Home extends Component {
    state = {
        name: '数据渲染',
        age: 10,
        lineStyle: {
            color: 'orange',
            fontWeight: 'bold',
            lineHeight: '60px'
        }
    }

    handleClick = (e) => {
        this.props.history.push('/detail')
    }

    render() {
        /* ES6的解构赋值 */
        let { name, age, lineStyle } = this.state;
        return (
            <div>
                {/* 行内样式 --- style={{color: 'red'}} */}
                <div onClick={this.handleClick} style={{color: 'red'}}>点击我跳转到detail页面</div>
                {/* 内联样式 --- style={lineStyle} */}
                <div style={lineStyle}>{age}</div>
            </div>
        )
    } 
}

export default Home;

• 动态路由

this.props.history.push('/path')