大家好,又见面了,我是你们的朋友全栈君。
原理: 在dom渲染完成之后,给window 添加 “hashchange” 事件监听页面hash的变化,并且在state属性之中添加了 route属性,代表当前页面的路由。
1、当点击连接 页面hash改变时,触发绑定在window 上的 hashchange 事件,
2、在 hashchange 事件中改变组件的 state中的 route 属性,(react组件的state属性改变时,自动重新渲染页面)
3、页面 随着 state 中的route属性改变自动 根据 不停的hash 给 Child 变量赋值不通的组件,进行渲染
核心代码:
from
‘react’
from
‘react-dom’
About
=
function () {
div>111</
div>
Inbox
=
function () {
div>222</
div>
Home
=
function () {
div>333</
div>
App
extends
React.
Component {
= {
substr(
1)
addEventListener(
‘hashchange’, ()
=> {
setState({
substr(
1)
this.state.route) {
‘/about’: Child
= About;
break;
‘/inbox’: Child
= Inbox;
break;
= Home;
div>
h1>App</
h1>
ul>
li><
a
href
=
“#/about”>About</
a></
li>
li><
a
href
=
“#/inbox”>Inbox</
a></
li>
ul>
Child />
div>
App />, document.body)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141862.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...