路由只有2和4的版本，没有3的版本，差距比较大
什么是路由？
路由是根据不同的 url 地址展示不同的内容或页面。
React Router
一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。
定义链接的组件，类似于a标签。
<Link to=“/users>users</Link>
{this.props.children}＝＝相当于路由试图的容器
render (<Router history={hashHistory}>
<Route path=”/" component={Demo}>
<Route path="/home" component={Header}></Route>
<Route path="/about" component={Con}></Route>
</Route>
</Router>, document.getElementById('root'))
组件有如下属性：
path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
Component＝＝设置该路径要加载的组件
索引 IndexRoute
指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。
例如：
<Route path="/" component={App}>
<IndexRoute component={Index}/>
</Route>
样式
当路径匹配时会触发activeStyle属性。
const ACTIVE = { color: 'red' }
普通链接
users 地址栏传参 定义：<Link to=“/users/1>users</Link>
<Route path="/user/:xxxx" component={User}/>
取得参数：
this.props.params.xxxx==1
路径跳转
在事件中进行路由路径跳转
hashHistory.push(’/home’)
绝对路径和重定向
重定向：
当路径匹配from的时候，自动重定向(跳转)到to的地址上面。
<Route path=”/index" component={index}>
<Redirect from=”/index/a" to=“/other" />
</Route>
从 /index/a 跳转到 /other
重定向
<IndexRedirect to="/home"/>
查询符-query
<Route path="/user/:xxxx" component={User}/>
取得参数：
this.props.params.xxxx
例如：
<Link to={{pathname:'/list',query:{id:item.goodsID} }}>
<Route path="/user" component={User}/>
url：/user/10086?foo=bar
this.props.params.userId 是 10086
this.props.location.query.foo 是 bar
路由的各个组件的生命周期和普通的组件生命周期是一样的。路由根据不同的url来加载和卸载不同的组件。
脚手架
创建react项目
npm install -g create-react-app 全局环境
create-react-app my-app 创建项目
cd my-app 进入项目
npm start 启动
安装依赖 使用2.8.1版本的依赖
npm install react-router@2 -D
配合 react/react-dom 15.6.1版本使用
低版的对低版的react，高版的对高版的react
npm i react@15 react-dom@15 -D 把版本降低到15版，装上的时候默认为高版
然后npm i 重新配置一下
查看配置文件(一般不需要生成完整版)
cd pro
安装一下路由
npm i react-router@2 -D
Home.js
import React from "react"; //引入react
import {Link} from "react-router"; //使用link的时候必须要引入的
import $ from "jquery"; //引入jquery，需要下jquery插件
const active={color:"red"} //css颜色的样式
class Home extends React.Component{
constructor(props){
super(props)
this.state={
list:[]
}
}
render(){
return(
<div>
<h1>Home</h1>
{
this.state.list.map(function (item,i) {
return(
<div key={i}> {/* key值必须加上，方便查找 */}
{/*<p><Link to={"/detail/"+item.pid} activeStyle={active}>{item.pname}</Link></p>*/}
{/*点击标签进入到详情页面，把id值传过去*/}
<p><Link to={{pathname:'/detail',query:{id:item.pid}}}>{item.pname}</Link></p>
{/* query传参的写法，query可以传多条数据 */}
</div>
)
})
}
<div>
{this.props.children} {/*视图展示，类似于vue的<router-view>*/}
</div>
</div>
)
}
componentWillMount(){
var _this = this;
$.ajax({
type:"get",
url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
async:false,
dataType:"json",
success:function (data) {
console.log(data)
_this.setState({list:data.data})
}
})
}
}
export default Home;
Ather.js
import React from "react";
import {hashHistory} from "react-router"; {/*使用编程式路由的时候的必须引入hashHistory*/}
class About extends React.Component{
tap(){
hashHistory.push("/other") {/*编程式路由，点击时直接跳转到other页面*/}
}
render(){
return(
<div>
<h1>About</h1>
<button onClick={this.tap.bind(this)}>跳转到other</button>
</div>
)
}
}
export default About;
Deatil.js
import React from "react";
import $ from "jquery";
class Detail extends React.Component{
constructor(props){
super(props)
this.state={
detail:""
}
}
render(){
return(
<div>
<h1>Detail</h1>
<p>{this.state.detail}</p>
</div>
)
}
componentDidMount(){ //必须在组件挂载之后使用ajax
var _this = this;
// $.ajax({
// type:"get",
// url:"http://jx.xuzhixiang.top/ap/api/detail.php",
// async:false, --------必须为false，数据量小的时候可以不写
// data:{id:_this.props.params.id}, ---------使用的params传参
// dataType:'json', --------传的是json数据
// success:function(data){
// _this.setState({detail:data.data.pdesc})
// }
// });
$.ajax({
type:"get",
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
async:false,
data:{id:_this.props.location.query.id}, //使用的是query传参
dataType:'json',
success:function(data){
_this.setState({detail:data.data.pdesc})
}
});
}
componentWillReceiveProps(a){ //更新数据使用的生命钩子，类似于vue的监听事件
console.log(a)
var _this = this;
// $.ajax({
// type:"get",
// url:"http://jx.xuzhixiang.top/ap/api/detail.php",
// async:false,
// data:{id:a.params.id},
// dataType:'json',
// success:function(data){
// _this.setState({detail:data.data.pdesc})
// }
// })
$.ajax({
type:"get",
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
async:false,
data:{id:a.location.query.id},
dataType:'json',
success:function(data){
_this.setState({detail:data.data.pdesc})
}
})
}
}
export default Detail;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory,Redirect,IndexRedirect, IndexRoute} from "react-router";
//react-router中定义了history这个属性 用于方便管理路由的方向 browserHistory／ hashHistory
import App from './App';
import Home from './components/Home';
import Other from './components/Other';
import About from './components/About';
import Detail from './components/Detail';
import * as serviceWorker from './serviceWorker';
import { route } from 'react-router/lib/PropTypes';
ReactDOM.render(<Router history={hashHistory}>
<Route path="/" component={App}> {/*加载根路径*/}
{/* <IndexRoute component={Home}/>*/} {/*默认加载根路径下的子组件*/}
{/*<Redirect from="/home" to="/other"/>*/} {/*当走到home路径的时候自动跳转到other*/}
<IndexRedirect component={Home}/>
<Route path="/home" component={Home}>
{/*<Route path="/detail/:id" component={Detail}></Route>*/}
<Route path="/detail" component={Detail}></Route>
</Route>
<Route path="/about" component={About}></Route>
<Route path="/other" component={Other}></Route>
<IndexRedirect to="/home"/> {/*默认展示home路径*/}
</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: http://bit.ly/CRA-PWA
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import {Link} from "react-router";
const active={color:"red"}
class App extends Component {
render() {
return (
<div className="App">
<h1>路由</h1>
<Link to="/home" activeStyle={active}>首页</Link> {/*默认点击加css样式*/}
<Link to="/about" activeStyle={active}>关于</Link>
<Link to="/other" activeStyle={active}>其他</Link>
<div>{this.props.children}</div>
</div>
);
}
}
export default App;