注册账号登录
micky
hello
关注

Go+GraphQL+React+Typescript搭建简书项目(五)——注册与登录

职业程序员创建于4月19日102次阅读2人收藏

前端的路由

在React中,路由的使用主要由react-router-dom提供。使用yarn安装react-router-dom。

$ yarn add react-router-dom

我们删除脚手架提供的示例代码,只保留index和App。
我们这里将路由内容写在App.tsx文件中。

import React from "react";
import {BrowserRouter, Route, Switch} from "react-router-dom"

export default function App() {
    return (
        <BrowserRouter>
                <Switch>
                    <Route path='/'/>
                    <Route path='/signIn'/>
                    <Route path='/signUp'/>
                </Switch>
        </BrowserRouter>
    )
}

这里我们定义了三个路由,path分别对应登录、注册和首页。路由被Switch包裹,以提供路由匹配切换的功能。一般情况下,匹配的规则为从上到下匹配,匹配成功即停止。
最上层的为BrowserRouter,正是它实现了前端的路由功能。当然也可以使用HashRouter。这两者最直观的区别,在于HashRouter的url中会出现'#'号,形似http://127.0.0.1:3000/#。
但最主要的区别在于,HashRouter使用url中的hash部分创建路由,并不会向服务器请求资源。而BrowserRouter基于真实url实现路由,会向服务端请求资源,如何服务端没有做相应的配置,会发生资源不存在的问题。
这里我们使用BrowserRouter,在本地开发时不会出现问题,后续上服务端时,我们再将如何进行配置。

现在我们为路由添加相应的组件。
在src目录下新建pages目录,用于存放我们的页面组件。在pages下新建sign目录,存放注册登录组件,新建jianshu目录,存放首页组件。
进入jianshu目录,新建jianshu.tsx文件。

import React from "react";

/**
 * Jianshu router component
 * @constructor
 */
export default function Jianshu() {
    return (
        <div>Index</div>
    )
}

进入sign目录,新建sign.tsx文件。

import React from "react";

/**
 * Sign router component
 * @constructor
 */
export default function Sign() {
    return (
        <div>Sign</div>
    )
}

现在我们的路由组件就建立好了。但是还不着急马上使用。我们先来介绍一下React 中的 suspense 和 lazy。

React 中的 suspense 和 lazy

lazy

在React项目中,我们所有import导入的组件和库,默认都是直接导入。使用webpack打包后,会将这些文件全部打包称为一个bundle文件。在正常情况下,加载一个js文件要比多个js文件快很多。
但是随着我们import的组件和库越多,bundle文件的体积越大,就会造成首次加载的速度变慢,甚至时间过长而无法忍受。这个时候,我们就需要对bundle中对内容进行代码分割。以期实现按需加载对模式。
而在React中,React.lazy()正是用来对项目代码进行分割,实现懒加载使用的。懒加载意味着当只有组件被使用时,其内部的资源才会被导入。

Suspense

Suspense的作用就是在遇到异步请求或者异步导入组件的时候等待请求和导入完成再进行渲染。我们通常使用Suspense来实现loading画面。

在路由中使用懒加载

了解了suspense 和 lazy的用处后,我们现在来正式使用他们。使用的方式很简单,修改App.tsx文件。

import React, {Suspense, lazy} from "react";
import {BrowserRouter, Route, Switch} from "react-router-dom"

export default function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<div>loading</div>}>
                <Switch>
                    <Route path='/' component={lazy(() => import('./pages/jianshu/jianshu'))}/>
                    <Route path='/signIn' component={lazy(() => import('./pages/sign/sign'))}/>
                    <Route path='/signUp' component={lazy(() => import('./pages/sign/sign'))}/>
                </Switch>
            </Suspense>
        </BrowserRouter>
    )
}

我们将组件的import使用lazy包裹起来,即可以实现懒加载。而将有异步请求或者动态加载的部分,放到Suspense下,就可以在请求过程中,调用fallback回调函数,渲染loading画面。

制作顶部进度条

在浏览网页的时候,我们常常会看到这样一个效果,当网页加载或者我们发出的请求,还未完成时,浏览器的顶部,会有一条细长的进度条。
我们现在也将借助Nprogress库实现这一效果,并将它应用在Suspense的fallback中,实现路由动效。

安装nprogress。

$ yarn add nprogress

在src下新建component目录,用于存放公共组件。在component下新建loading.tsx文件。

import React, { useEffect } from 'react';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import {Col, Row} from "antd";

const Loading = () => {
    useEffect(() => {
        NProgress.start();
        return () => {
            NProgress.done();
        };
    }, []);
    return (
        <Row>
            <Col span={12} offset={6}>
                Loading
            </Col>
        </Row>
    );
};

export default Loading;

将loading组件应用到路由中。修改App.tsx。

import React, {Suspense, lazy} from "react";
import {BrowserRouter, Route, Switch} from "react-router-dom"
import Loading from "./component/loading";

export default function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<Loading/>}>
                <Switch>
                    <Route path='/' component={lazy(() => import('./pages/jianshu/jianshu'))}/>
                    <Route path='/signIn' component={lazy(() => import('./pages/sign/sign'))}/>
                    <Route path='/signUp' component={lazy(() => import('./pages/sign/sign'))}/>
                </Switch>
            </Suspense>
        </BrowserRouter>
    )
}
1条评论 / 5条回复
第一楼
4月26日2 人赞
回复
jack
回复了micky
踩踩
4月26日
回复
00
4月26日
回复
jack
回复了micky
沙发
4月26日
回复
谢谢
4月26日
回复
哈哈
5月2日
回复
micky
hello
关注私信
2
关注
6
粉丝
3
帖子