react-router 简单介绍与本地调试环境搭建

前言

react-router是react的浏览器路由组件，使用react-router可以轻松的实现浏览器路由跳转。react-router目前已经更新到v5.3.0, 最新的history也已经更新到v5.0.1。目前，从Github仓库可以看出，官方人员正在全力使用TypeScript重构两个项目, 新版的history仓库和原来的仓库并不兼容。我们从npm上直接添加的history仍然是v4版本。

使用TypeScript重构的两个仓库:
react-router仓库
history仓库

以下介绍的项目版本：react-router是v5.3.0, history是v4.10.1

react-router

react-router仓库, 分为四个包:

• react-router: react router的核心组件
• react-router-dom: 浏览器路由组件
• react-router-native: react native的路由组件
• react-router-config: 静态路由组件（如果需要使用react router的静态路由，需要引用这个包，重构后这个包，已经被删除）

在使用过程中，我们只需要添加对应的包即可，不需要添加react-router，例如，在浏览器中使用添加react-router-dom；在native中使用添加react-router-native；如果需要使用以前的静态路由，就添加react-router-config 。

本地调试环境搭建

在阅读源码过程中难免会有令人头痛的代码片段部分，而这部分，想要弄明白，最好的方式就是通过调试，但怎么在本地调试代码呢？我们可以借助webpack的resolve.alias进行本地代码映射：

resolve: {
  extensions: ['.js', '.jsx'],
  alias: {
        'react-router-dom':path.resolve(__dirname, '../src/react-router/packages/react-router-dom/modules'),
        'react-router': path.resolve(__dirname, '../src/react-router/packages/react-router/modules'),
        'history': path.resolve(__dirname, '../src/history/modules')
  }
}

除此之外，react-router还需要其他包，因此需要在react-router和history下运行yarn安装对应的包。

然后，就可以引入到项目中了：

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function Start() {
  return (
    <div className="App">
      <p>test page</p>
    </div>
  );
}
const Root = () => {
  return(
    <div>
      <p>root page</p>
    </div>
  )
}

function App() {
  return(
    <Router>
      <Switch>
        <Route path='/test' component={Start}/>
        <Route component={Root} />
      </Switch>
    </Router>
  )
}

export default App;