全局安装 create-react-app

npm install create-react-app -g

创建项目

在全局安装了create-react-app 后 创建项目,如果按照下面的第一种办法创建不成功,可以使用第二种办法

create-react-app react01
// 或者
npx create-react-app react01

使用路由

  • 下载路由模块
npm i react-router-dom -s

为实现路由懒加载 安装 react-loadable

npm i react-loadable -s

  • 创建页面

    src 目录下创建 pages文件,测试文件目录如下

pages => index.js代码

import Loadable from 'react-loadable';
import { ActivityIndicator } from 'antd-mobile'; const Home = Loadable({
loader: () => import('./home'),
loading: ActivityIndicator
}); const Cate = Loadable({
loader: () => import('./cate'),
loading: ActivityIndicator
}); export {
Home,
Cate
}
  • src 目录下创建创建routes.js
import {
Home,
Cate
} from './pages' const routes = [
{
url: '/home',
component: Home,
text: '首页',
isToggleFooter:true,
isShowHeaderAndFooter: true
},
{
url: '/cate',
component: Cate,
text: '分类',
isToggleFooter:true,
isShowHeaderAndFooter:true
}
] export default routes
  • 在 app.js引入router模块和routes.js文件
import React, { Component, Fragment } from 'react';
import {
Route,
Redirect,
Switch
} from 'react-router-dom' import routes from './routes' class App extends Component {
render() { return (
<Fragment>
<header>Header</header>
<Switch>
{
routes.map(route => {
return (
<Route
key={route.url}
path={route.url}
component={route.component} />
)
})
}
<Redirect exact from="/" to={routes[0].url} />
{/* 这里用 redirect 进行 首页自动跳转到 /home 路由下
exact 意味着精确匹配 当为 / 时才跳转 /home 不是包含 / 就跳转到 /home
*/}
{/* <Redirect to = '/all'/> */}
{/* 如果找不到页面 则去 4040页面 */}
</Switch>
<footer>尾部</footer>
</Fragment>
);
}
} export default App;
  • 在 src 最外层 index.js使用 router模块
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker'; ReactDOM.render(
<Router>
<Route component = {App} />
</Router>
,
document.getElementById('root'))

路由间跳转

以home 页面为例

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
export default class Home extends Component {
render() {
return (
<Fragment>
<div>我是Home页</div>
<button> <Link to="/cate">跳转到 cate 页</Link> </button>
</Fragment>
)
}
}

create-react-app 入门学习的更多相关文章

  1. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  5. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  10. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

随机推荐

  1. week-03

    1.简述HTTP交互原理 1.浏览器分析输入访问的地址 域名(IP)+$uri 2.读取浏览器缓存 3.请求DNS服务器,解析域名,返回IP 4.建立TCP连接,三次握手 5.发送请求 6.接收返回请 ...

  2. mysql数据库-运维合集

    目录 RDBMS 术语 整删改查操作 库操作 表操作 账号与授权 匹配符(条件查询) MySQL三大类数据类型 函数 其他操作 查看数据库的占用空间大小 开启慢查询 状态查询 字符集设置 忘记密码重置 ...

  3. Step By Step(Lua输入输出库)

    Step By Step(Lua输入输出库) I/O库为文件操作提供了两种不同的模型,简单模型和完整模型.简单模型假设一个当前输入文件和一个当前输出文件,他的I/O操作均作用于这些文件.完整模型则使用 ...

  4. stream的groupby出来的map是有顺序的map

    stream分组后的map是有序map List<RedisInstanceTypeDto> typeDtoList = ModuleHelper.mapAll(redisInstance ...

  5. 视频教学动作修饰语:CVPR2020论文解析

    视频教学动作修饰语:CVPR2020论文解析 Action Modifiers: Learning from Adverbs in Instructional Videos 论文链接:https://a ...

  6. 实战SpringBoot Admin

    长话短说哦,直接查看下文吧 目录 声明 先锋 前提 SpringBoot Admin 介绍 服务端的搭建 客户端的搭建 参数的指南 尾声 声明 见名知意,实战SpringBoot Admin,实战!实 ...

  7. MySQL笔记03(黑马)

    今日内容 DQL:查询语句 排序查询 聚合函数 分组查询 分页查询 约束 多表之间的关系 范式 数据库的备份和还原 DQL:查询语句 排序查询 语法:order by 子句 order by 排序字段 ...

  8. js正则中文

    hi,大家好 今天跟小伙伴们浅谈以下如何用正则表示中文以及如何去运用.众所周知中文在计算机中是不能进行存储的.那我们是以什么办法让我们和计算机进行更好的沟通呢?常用的几种中文编码格式utf-8编码ut ...

  9. NOIP模拟测试2「排列 (搜索)·APIO划艇」

    排序 内存限制:128 MiB 时间限制:1000 ms 标准输入输出     题目描述 输入格式 数据范围与提示 对于30%的数据,1<=N<=4: 对于全部的数据,1<=N< ...

  10. ORA-09817:Write to audit file failed

    ERROR: ORA-09817: Write to audit file failed. --这种错误基本是磁盘空间满了 问题描述:sqlplus / as sysdba登不上,报上述ora-098 ...