react-router学习笔记-自定义路由组件

之前接触过react框架，但是很长时间没有使用了，最近公司在使用这个框架，顺便学习一下，router的具体实现

不使用react -router的代码：(具体代码可以到我的码云上面查看：https://gitee.com/lenggushi/react-demo.git（还在更新中），有不足之处可以评论交流哈

import React from 'react';
function About() {
  return <div>about</div>
}
function Demo() {
  return <div>demo</div>
}
function Home() {
  return <div>Home</div>
}

export default class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      router: '/'
    }
  }
  componentDidMount() {
    console.log(this.props)
    console.log(this.state.router)
    window.addEventListener('hashchange', () => {
      console.log(window.location.hash.substr(1))
      this.setState({
        router: window.location.hash.substr(1)
      })
    })
  }
  render() {
    let Child;
    console.log(this.state.router)
      switch(this.state.router) {
        case '/about': Child = About(); break;
        case '/demo': Child = Demo(); break;
        default: Child = Home();
      }
      console.log(Child)
    return (
      
      <div className="App">
        <header className="App-header">
          <ul>
            <li><a href="#/about">关于</a></li>
            <li><a href="#/demo">demo</a></li>
          </ul>
        </header>
        {Child}
      </div>
    );
  }
}

这里模拟了没有路由的实现，但是它局限性很大，想一下，如果路由下面嵌套多个子路由，如何只改变特定的某一个路由页面的相关组件的更新加载呢？这就是react-router要做的一些事情了