前言

因为这几天空闲,所以抽空研究了一下主流的前端框架react,在研究期间因为从零开始, 遇到过挺多问题,幸好不算艰难,到今天初步分析研究清楚了react的基本步骤和关于使用 redux操作数据源的理解. 本文主要介绍使用create-react-app脚手架来搭建一个 react项目的基础步骤,后面会跟上对于在react项目中使用按需加载路由及redux管理项目数据源的代码操作和分析.

开始搭建项目

使用create-react-app搭建react项目的基本步骤网上都找得到,也有说明,这里就不赘述了,主要把步骤放在下面给初学的朋友.

1.安装脚手架create-react-app

   npm i  create-react-app -g      (-g安装后,以后在相同文件夹下创建项目就可以直接从2开始了)

创建个人项目

   create-react-app  my-test1     (项目名, 这里取my-test)

创建完成后进入my-test项目文件夹

  cd my-test1

4.终端进入项目后, 安装路由依赖

   npm i react-router-dom     (用于操作react页面路由跳转)

安装完路由依赖之后,安装按需加载路由的依赖(有很多种方式,作者在此处使用的时react-loadable, 觉得这种形式对于一些添加权限性质页面更好操作,主要是看中维护性高,当然,个人见解)

   npm i react-loadable     (此依赖用于按需加载路由,只有需要用到的路由会被加载)

以上作为一个单纯的实现按需加载路由的简单的react项目需要的依赖就安装完成了, redux我会放在下一篇文章中讲, 分开对初学者更好分析和理解一些.

接下来就可以开始实现一个简单的按需跳转的路由功能项目了

首先进入到项目文件下的src目录中,找到index.js文件,如上图.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom'

ReactDOM.render(
    <Router>
        <Route component={App}></Route>
    </Router>
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

然后导入Route, 为App添加路由标签

这里解释一下, 红方块和绿方块分别是两种路由模式:

红圈代表的是BrowserRouter模式, 最直观的体现在于网页的地址栏路径是没有hash值的 (/#/)
绿圈代表的是HashRouter模式, 最直观的体现在于网页的地址栏路径包含(/#/)

这里我选择的是第一种,不懂两个模式区别的可以搜搜看,大致就是请不请求服务器的区别,有过vue经验的朋友应该很好理解, 这里也附上一个链接,感兴趣的朋友可以看看 https://blog.csdn.net/gwdgwd123/article/details/85029121

接下来我们修改APP.JS文件

首先把导入的logo去掉,因为我们不需要, 然后从react-router-dom中导入 { Switch, Route, Redirect } . 然后去掉App函数返回部分app盒子下的header子盒子. 然后写上我们要的路由判定

这里说明一下 :

Switch标签包含在Route 和Redirect标签外的意义在于,它会让输入的路由只匹配到搜索的路由, 有兴趣的可以等之后路由搭建完成后,去除Switch标签,然后地址栏输入路由进行跳转, 其中'/'所指代的路由也是会被同时匹配到的,而加了Switch标签就可以解决这个问题.
Redirect标签用于页面路由跳转的重定向, exact表示精准匹配. from是输入的路由路径, to是当输入from的路径时,重定向到某个设定的路由路径.
Route用于创建各个顶层页面的路由对象, 常规来讲,会有 path和component属性,分别指代路由和对应组件页面.

这里我就直接贴最终的app代码了

import React, { Component } from 'react';
import './App.css';
import { Switch, Route, Redirect} from 'react-router-dom'
import routes from './router/router.js'

class App extends Component {
  render () {
    return (
      <div className="App">
        <Switch>
          {
            routes.map(route => {
              return (
                <Route
                  key = { route.path }
                  path = { route.path }
                  component = { route.component } />
               )
             })
           }
           <Redirect exact from = '/'  to = { routes[0].path } />
           <Redirect to = '/404' />
         </Switch>
      </div>
    );
  }
  
}

export default App;

做完上述内容之后,app.js可以先暂时放一边,可以开始创建项目的页面组件了.

首先是在src目录下创建三个文件夹, 分别是 component, pages, router, 三者分别存放共用组部件, 页面组件, 路由设置文件.

然后先在components里创建一个header的共用头部组件. 创建组件和共用组件的文件格式大致相同, 即先创建一个存储组件的文件夹,然后在文件夹下创建一个index.js用于构建组件, 一个.css文件作为样式文件,(当然,也可以全部写到一个样式文件中.)

import React, { Component } from 'react';
// NavLinK作为跳转路由标签,如常用的侧边栏跳转高亮效果就可以使用这个标签
import { NavLink } from 'react-router-dom';
import './Header.css'

// 声明跳转路由时,当前跳转对象的背景色及颜色,以作高亮区分
const selectedStyle = {
    backgroundColor: 'red',
    color: 'slategray'
}

class Header extends Component {
    render () {
        return (
            <nav>
                <NavLink to = '/home' activeStyle = { selectedStyle }> 首页 </NavLink>
                <NavLink to = '/Detail' activeStyle = { selectedStyle }> 详情 </NavLink>
                <NavLink to = '/Login' activeStyle = { selectedStyle }> 登录 </NavLink>
                <NavLink to = '/Collecte' activeStyle = { selectedStyle }> 收集 </NavLink>
            </nav>
        )
    }

}

// 最后要将Header暴露出来
export default Header

然后在components目录下创建一个index.js 把Header组件暴露出来

export { default as Header } from './Header'

创建完共用组件后,可以进行页面级组件的构建,这里我只做四个页面级组件以作为案例.分别为Home, Collecte, Detail , Login, 创建方式同上

import React, { Component } from 'react';
import {Header} from '../../components'

// 这里几个页面级组件的结构都一样,改类名就行
class Detail extends Component {
    render () {
        return (
            <div>
                <Header/>
                详情页
            </div>
        )
    }
}

export default Detail

需要注意的是404页面不能创建数字类404, 所以改为NotFound, 而且也不需要什么共用组件.

import React, { Component } from 'react';

class NotFound extends Component {
    render () {
        return (
            <div>
                 找不到网页
            </div>
        )
    }
}

export default NotFound

ps:这里说一下,为什么创建index.js而不是在组件文件夹下创建Home.js之类的, 这个当然可以, 只是index.js会被自动寻找识别,引入的时候可以偷懒一下.

创建完页面级组件之后,基本上完成一半了, 接下来可以创建路由文件了, 首先,我们要在pages目录下创建一个index.js文件, 用于设置按需加载的页面级组件.

import Loadable from 'react-loadable';

const Loading = () => null;

const Home = Loadable ({
    loader: () => import('./Home'),
    loading: Loading
});

const Collecte = Loadable ({
    loader: () => import('./Collecte'),
    loading: Loading
});

const Detail = Loadable ({
    loader: () => import('./Detail'),
    loading: Loading
});

const Login = Loadable ({
    loader: () => import('./Login'),
    loading: Loading
});

const NotFound = Loadable ({
    loader: () => import('./404'),
    loading: Loading
});

export { Home, Detail, NotFound, Login, Collecte }

这样设置完成后,就可以在用到哪个路由时才加载哪一个了.

然后最后两步, 在router文件下定义路由. 可以忽略掉那个store文件夹,后续讲redux用的.在这里面,routes集合里的每一项你都可以添加一些其他的属性,诸如meta属性用于区分权限,text属性用于引用显示手机端底栏选项名等等.

import { Home, Detail, NotFound, Login, Collecte } from '../pages/index';

const routes = [{
    path: '/home',
    component: Home
},{
    path: '/Collecte',
    component: Collecte
},{
    path: '/Detail',
    component: Detail
},{
    path: '/404',
    components: NotFound
},{
    path: '/Login',
    component: Login
}];

export default routes

定义完路由之后,就可以补全app.js里的内容了

到这时候,整个简单的路由项目就完成了,可以看实效,代码我稍后看下上传到git上.