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);
运行结果
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!