前端学习（2316）：react之路由基础之hook之对象声明

import React, {useState} from 'react';

import  Home from './components/Home.js'
import World from './components/World.js';
import Phone from "./components/Phone.js";
import{Route,Link,NavLink,Switch,Redirect,withRouter} from 'react-router-dom'
import './App.css';
function App(props) {

  /*  /!*不是路由切换的组件也有属性*!/
 //监控组件路由的变化
    props.history.listen((link)=>{
        console.log(link)
    })
    console.log(props)*/
    let[val,setVal]=useState({
        vala:0,
        valb:1,
        valc:2
    })
  return (
    <div className="App">
        <div>
            使用数据:{val.vala}---{val.valb}---{val.valc}
            <button onClick={()=>{setVal(val.vala+1)}}>点我加</button>
        </div>

        {/*<div>
            <NavLink to="/home">点我去home</NavLink>
            <NavLink to="/world">点我去world</NavLink>
            <NavLink to="/phone/我是参数">点我去hone</NavLink>

            <button onClick={()=>{props.history.push("/home")}}>点我去home</button>
            <button onClick={()=>{props.history.push("/world")}}>点我去world</button>
            <button onClick={()=>{props.history.push("/phone")}}>点我去phone</button>
        </div>
        <Switch>
      你好
        <Redirect from="/" to="/home/homea" exact></Redirect>
        <Route path="/home" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
        <Route path="/world" component={World}></Route>
        <Route path="/phone/:id" component={Phone}></Route>
        </Switch>*/}
    </div>
  );
}
/*class App extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            text:"我是状态数据"
        }
    }
    render() {
        return(
            <div>hello--{this.state.text}</div>
        )
    }
}*/

export default withRouter(App);

运行结果