React路由与项目实践|青训笔记

在浏览器地址栏输入一个 URL 后回车，背后发生了什么 应用层：

• 浏览器封装 HTTP 请求报文
• DNS 解析域名获得目标服务器地址

传输层：

• 建立连接
• 把应用层传过来的 HTTP 请求报文进行分割，并在各个报文上打上标记序号及端口号转发给网络层

网络层：

• 利用 ARP 协议根据 IP 地址获取作为通信目的地的 MAC 地址后转发给链路层

服务端在链路层收到数据，按序往上层发送，一直到应用层接收到浏览器发送来的 HTTP 请求报文，然后处理该请求并返回 HTTP 响应报文，浏览器接收到响应报文之后解析渲染界面。最后 TCP 断开连接。

在 React 中我们可以通过 react-router 这个强大路由库进行页面之间的跳转，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

在环境搭建篇中我们已经安装了 react-router，由于我们采用 Hooks 的写法，react-router 提供了一个 API 叫做 useHistory，接下来我们就通过它，来实现我们的跳转功能～

const history = useHistory();

const onRouterToLink = (text: string) => { history.push('/text') }

路由组件开发

我们在 renderer 下，创建一个路由文件 router.tsx，管理所有的模块入口，先来编写一下 router.tsx

// renderer/router.tsx
import React from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import Root from './container/root';
​
function Router() {
  return (
    <HashRouter>
      <Switch>
        {/* 👇 一定要添加 exact */}
        <Route path="/" exact>
          <Root />
        </Route>
      </Switch>
      {/* 重定向到首页 */}
      <Redirect to="/" />
    </HashRouter>
  );
}
export default Router;

眼精的小伙伴已经发现，上面我们引入了 import Root from './container/root'，貌似我们现在还没有这个组件，我们来创建一下它。

创建一个文件夹 container，该文件夹存放着所有模块的代码文件，此时我们添加一个新文件夹，取名为：root，表明这是首页模块，并创建入口文件 index.tsx 和 index.less

// renderer/container/root/index.tsx
import React from 'react';
import './index.less';
​
function Root() {
  return <div>我是首页</div>;
}
export default Root;

回到根组件 app.tsx，将路由组件 router.tsx 引入

// renderer/app.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
function App() {
  return <Router />;
}
​
ReactDOM.render(<App />, document.getElementById('root'));