React脚手架 & 路由

脚手架

creact react app的官方文档

以系统管理员的身份，安装该脚手架全局命令

npx create-react-app my-app //第一种方法装脚手架

npm install create-react-app -g

你就会在全局命令行里面拥有一个create-react-app命令，可以用以下命令检查是否安装成功

create-react-app -V

创建第一个项目，如果安装不成功可以考虑换这两个尝试一次yarn和cnpm

create-react-app [项目名字]
create-react-app my-app //例如这样

启动项目

cd my-app
npm start //或者 npm run start

在浏览器里面，查看该地址

http://localhost:3000/

public 单页面应用的主页（ico，index.html）
src 开发文件夹(组件，自定义模块，样式，模板)

react和vue的脚手架都是基于webpack的

路由

React-Router-DOM官方文档

type	des
实现单页面应用程序single page application(SPA)（今日头条）	不刷新整个页面，永远在一个index.html，依靠路由切换具体的场景，首次加载大部分大部分东西，后面异步加载具体要更新的内容
多页面应用程序(腾讯新闻)	页面跳转,整体刷新，资源文件重新加载

安装

安装路由模块react-router-dom

npm install react-router-dom

import {
    BrowserRouter as Router, Route, Link } from "react-router-dom";

BrowserRouter和HashRouter

https://www.cnblogs.com/houjl/p/10056718.html（路由传参的三种方式）

BrowserRouter称为浏览器路由，使用的时候是url上面不带#，兼容性比较差，需要后端配合，好看

HashRouter称之为哈希路由，兼容性比较高

react-router-dom内置组件Link，Redirect 等

import {
    HashRouter as Router, Route, Link, Switch, Redirect, withRouter} from "react-router-dom";

嵌套路由

路由里面放路由，第一层路由/home /my

//首先在index.js文件根部注入路由
import {
    HashRouter as Router } from "react-router-dom";
    ReactDOM.render(
        <Router>
            <App />
        <