router的底層實現(xiàn)
當url地址或者點擊forword/back或者點擊link時。以browserHistory(一種history類型:一個 history 知道如何去監(jiān)聽瀏覽器地址欄的變化， 并解析這個 URL 轉化為 location 對象)為例 :
browserHistory進行路由state管理,主要通過sessionStorage
//保存 路由state(router state)
function saveState(key, state) {
? ...
? window.sessionStorage.setItem(createKey(key), JSON.stringify(state));
}
//讀取路由state
function readState(key) {
? ...
? json = window.sessionStorage.getItem(createKey(key));
? return JSON.parse(json);
}
其中saveState函數傳進來的state是個json對象，如：
{route: '/about'} ///假設此時的location為'/about'
進行路由匹配，最終渲染對應的組件
const About = React.createClass({/*...*/}) //About 組件
const Inbox = React.createClass({/*...*/}) //Inbox 組件
const Home = React.createClass({/*...*/}) //Home組件
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>
? ?
