React-Router看这就够了

React-Router路由主要由三大部分组成： Router：是所有路由组件共用的底层接口组件，是路由规则制定的最外层的容器； Route：路由规则匹配，以及组件加载； Link：路由跳转组件。

Router类似于一个大型的注册中心，所有路由相关配置规则都包含其中(类似于java中的RequestMapping)。根据浏览器url地址栏的变动进行跳转到不同的Route。

比如现在有两个按钮，点击不同按钮切换到不同的的组件(登录和首页)中，代码实现如下：

const Login = () => {
    render <div>login页<div>;
};
const Home = () => {
    render <div>首页</div>;
}
const TestDemo = () => {
    let [UI, setUI] = userState('Login');
    // 按钮切换
    const handleUIChange = (type) => {
        setUI(type);
    }
    const showUI = () => {
        if (UI === 'Login') {
            return <Login />
        }
        return <Home />
    }
    
    return (
        <div>
            <a onClick={() => this.handleUIChange('Login')}>登录页</a>
            <a onClick={() => this.handleUIChange('Home')}>首页</a>
            <div>
                {this.showUI()}
            </div>
        </div>
    )
    
}

如果把以上代码中的a标签点击事件换成根据location对象去根据url匹配的话，基本上就是路由的思想了。 需要指出的是，Router对象下主要包含：HashRouter：基于hash、BrowserHash：基于url跳转、内存路由、NativeRouter：native路由、StaticRouter：地址不改变的静态路由组件。 路由的匹配规则是由上至下、由外至内的，声明路由配置的时切记要注意。 同时路由中要主要两个属性render和component。

render：

当需要传递值到Route中的组件时，使用render；

component：

当不需要传递值到Route中的组件时，可以使用component。

component和render的理解：

1. 每次路由切换都触发路由对应的组件重新渲染，无论是component属性还是render属性
2. 当用component属性，值为匿名函数时，父组件的每次重新render（无论有没有props传递给子组件）都会造成子组件重新render（每次render都会执行constructor）
3. 当用component属性时，值为react元素时，父组件的每次重新render都不会造成子组件每次都执行constructor
4. 当用render属性时，值为匿名函数时，父组件的每次重新render都不会造成子组件每次都执行constructor
5. 当用render属性时，值不可以为react元素，只能是函数