前序: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传参