大家好，又见面了，我是你们的朋友全栈君。
原理： 在dom渲染完成之后，给window 添加 “hashchange” 事件监听页面hash的变化，并且在state属性之中添加了 route属性，代表当前页面的路由。
1、当点击连接 页面hash改变时，触发绑定在window 上的 hashchange 事件，
2、在 hashchange 事件中改变组件的 state中的 route 属性，（react组件的state属性改变时，自动重新渲染页面）
3、页面 随着 state 中的route属性改变自动 根据 不停的hash 给 Child 变量赋值不通的组件，进行渲染
核心代码：
import React
from
‘react’
from
‘react’
import { render }
from
‘react-dom’
from
‘react-dom’
const
About
=
function () {
About
=
function () {
return <
div>111</
div>
div>111</
div>
}
const
Inbox
=
function () {
Inbox
=
function () {
return <
div>222</
div>
div>222</
div>
}
const
Home
=
function () {
Home
=
function () {
return <
div>333</
div>
div>333</
div>
}
class
App
extends
React.
Component {
App
extends
React.
Component {
state
= {
= {
route: window.location.hash.
substr(
1)
substr(
1)
}
componentDidMount() {
window.
addEventListener(
‘hashchange’, ()
=> {
addEventListener(
‘hashchange’, ()
=> {
this.
setState({
setState({
route: window.location.hash.
substr(
1)
substr(
1)
})
})
}
render() {
let Child
switch (
this.state.route) {
this.state.route) {
case
‘/about’: Child
= About;
break;
‘/about’: Child
= About;
break;
case
‘/inbox’: Child
= Inbox;
break;
‘/inbox’: Child
= Inbox;
break;
default: Child
= Home;
= Home;
}
return (
<
div>
div>
<
h1>App</
h1>
h1>App</
h1>
<
ul>
ul>
<
li><
a
href
=
“#/about”>About</
a></
li>
li><
a
href
=
“#/about”>About</
a></
li>
<
li><
a
href
=
“#/inbox”>Inbox</
a></
li>
li><
a
href
=
“#/inbox”>Inbox</
a></
li>
</
ul>
ul>
<
Child />
Child />
</
div>
div>
)
}
}
render(<
App />, document.body)
App />, document.body)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/141862.html原文链接：https://javaforall.net
