react 脚手架创建项目步骤

前序：react 脚手架创建项目，分react高低版两种，接下来具体看实施

react低版本

1、全局环境：npm install -g create-react-app

创建项目：create-react-app 项目名

创建好之后，根据提示执行，如果没有提示还是看package.json 文件/2

2、使用create-react-app 创建项目，里面安装的react的版本默认的是高板，在低版本中使用需要将react降成低版本 npm i react@15.6 react-dom@15.6 -D

3、安装react的路由

npm i react-router@2 --save-dev

然后去创建目录 （components,css,img）

4、引入主要组件对象

import {Router,Route,hashHistory,IndexRoute} from 'react-router'

Router  -----路由对象
Route  ------规则对象
Link   ------导航标签
hashHistory ---路由方向管理

5、写组件和配置路由，低版本中的路由配置是在入口index.js文件中设置，

<Router history={hashHistory}>
        <Route path='/about' component={About}></Route>
        Route 的属性有path和component
</Router>

高react版本

高版的路由配置位置和方式与低版不同

npm install -g create-react-app 全局环境

create-react-app 项目名 创建项目

生成项目后，按如下步骤

1、安装依赖 不需要指定版本，默认最新

npm i react-router react-router-dom --save-dev

2、引入主要组件对象

import {BrowserRouter as Router,Route,Link,Redirect} from ‘react-router-dom’；

写组件和路由：

路由是在本组件写的，使用的是Router +Route ,　Router只包含一个根节点

3、书写结构在组件内部，不需要写在render中，Router组件有且只有一个跟节点，除了路由组件，可以写入其他标签

默认 Route所在的位置为路由组件显示的容器（tips：Link写在Router内部形成路由结构）

<Router>
	<div>
		<Link to="/home">首页</Link>
		<Link to="/about">关于</Link>
		<Route path="/home" component={Home}></Route>
		<Route path="/about" component={About}></Route>
	</div>
</Router>

4、路由重定向 通过 Redirect组件对象，设置to属性

<Redirect to="/about"/>

需要和Switch 配合使用

5、路由参数传递 -----------------比低版多了state

/a/1 ---this.props.match.params.id               --------params 传参

/a?id=1---this.props.location.query.id		------query传参

/a --  this.props.location.state     		---------state传参