create-react-app中路由的簡要闡述
用create-react-app創(chuàng)建出來的應(yīng)用為單頁面應(yīng)用俊性，什么意思呢烁峭？就是說在你的瀏覽器的地址欄輸入地址按下回車鍵的一瞬間，瀏覽器會(huì)向服務(wù)器發(fā)送一次請求，請求一個(gè)html頁面依沮，之后的所有能看見的頁面的跳轉(zhuǎn)等等都是基于這個(gè)頁面實(shí)現(xiàn)的便监，換句話說瀏覽器不會(huì)再向服務(wù)器請求其他的頁面
- 請求發(fā)送到服務(wù)器之后，服務(wù)器會(huì)返回一個(gè)常常的html頁面字符串桂躏，然后瀏覽器解析字符串钻趋，開始繪圖，解析過程中發(fā)現(xiàn)了script標(biāo)簽剂习，再次發(fā)送一次請求蛮位，用來請求html頁面，到此所有后臺(tái)請求全部結(jié)束
- 所有的頁面跳轉(zhuǎn)都是基于js邏輯來實(shí)現(xiàn)的
create-react-app中路由實(shí)現(xiàn)的基本原理
比如在app.js文件中一共引入了三個(gè)頁面組件鳞绕，你想做一件什么事情呢失仁？你想訪問http://localhost:3000/ 這個(gè)地址的時(shí)候呈現(xiàn)home首頁 這個(gè)組件，訪問http://localhost:3000/login地址的時(shí)候呈現(xiàn)login登錄這個(gè)組件猾昆，訪問http://localhost:3000/content地址的時(shí)候呈現(xiàn)content內(nèi)容頁這個(gè)組件
那么需要怎么做呢陶因？其實(shí)特別簡單，判斷一下地址欄的值垂蜗，（hash值：不會(huì)隨著地址欄傳遞到服務(wù)器中）保存hash值為this.state屬性楷扬，判斷hash值是否改變，如果改變就改變state的值贴见，state的值改變了就會(huì)重繪頁面烘苹，就會(huì)重新判斷hash值，進(jìn)而選擇不同的組件進(jìn)行渲染
import React, { Component } from 'react';
import './App.css';
class A extends Component{
render(){
return(
<div>注冊頁面</div>
)
}
}
class B extends Component{
render(){
return(
<div>登錄頁</div>
)
}
}
class App extends Component {
constructor(){
super();
this.state={
hash:"#/"
}
}
componentDidMount(){
window.onhashchange = ()=>{
this.setState({
hash:window.location.hash
});
}
}
render() {
let o;
let {hash} = this.state;
switch (hash) {
case "#/":
o = (
<div>首頁</div>
);
break;
case "#/login":
o = <B/>;
break;
case "#/register":
o = <A/>;
break;
}
return (
<div className="App">
{o}
</div>
);
}
}
export default App;
喜歡的話片部，歡迎大家去我的csdn博客學(xué)習(xí)更多的內(nèi)容
