react路由原理解析

原理： 在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' import { render } from 'react-dom'


const About = function () { return < div>111</ div> } const Inbox = function () { return < div>222</ div> } const Home = function () { return < div>333</ div> }
class App extends React. Component {
state = { route: window.location.hash. substr( 1) }
componentDidMount() { window. addEventListener( 'hashchange', () => { this. setState({ route: window.location.hash. substr( 1) }) }) }
render() { let Child switch ( this.state.route) { case '/about': Child = About; break; case '/inbox': Child = Inbox; break; default: Child = Home; }
return ( < div> < h1>App</ h1> < ul> < li>< a href = "#/about">About</ a></ li> < li>< a href = "#/inbox">Inbox</ a></ li> </ ul> < Child /> </ div> ) } }
render(< App />, document.body)