create-react-app中路由的简要阐述
用create-react-app创建出来的应用为单页面应用，什么意思呢？就是说在你的浏览器的地址栏输入地址按下回车键的一瞬间，浏览器会向服务器发送一次请求，请求一个html页面，之后的所有能看见的页面的跳转等等都是基于这个页面实现的，换句话说浏览器不会再向服务器请求其他的页面
- 请求发送到服务器之后，服务器会返回一个常常的html页面字符串，然后浏览器解析字符串，开始绘图，解析过程中发现了script标签，再次发送一次请求，用来请求html页面，到此所有后台请求全部结束
- 所有的页面跳转都是基于js逻辑来实现的
create-react-app中路由实现的基本原理
比如在app.js文件中一共引入了三个页面组件，你想做一件什么事情呢？你想访问http://localhost:3000/ 这个地址的时候呈现home首页 这个组件，访问http://localhost:3000/login地址的时候呈现login登录这个组件，访问http://localhost:3000/content地址的时候呈现content内容页这个组件
那么需要怎么做呢？其实特别简单，判断一下地址栏的值，（hash值：不会随着地址栏传递到服务器中）保存hash值为this.state属性，判断hash值是否改变，如果改变就改变state的值，state的值改变了就会重绘页面，就会重新判断hash值，进而选择不同的组件进行渲染
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博客学习更多的内容
