步骤
create-react-app my-app 创建项目
1、安装依赖 不需要指定版本，默认最新
npm i react-router react-router-dom jquery --save-dev
2、引入主要组件对象
import {BrowserRouter as Router,Route,Link,NavLink,Redirect} from 'react-router-dom'；
Link和NavLink作用是一样的（NavLink会默认带有一个active标签）
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属性—Switch对象处理警告-(包含Route以及Redirect)
<Redirect to="/about"/>
5、路由参数传递
> /a/1 ---this.props.match.params.id
> /a?id=1---this.props.location.query.id /a --
> this.props.location.state
6、事件中进行路由切换跳转
this.props.history.push('/home')
因为BrowserRouter 相当于 故可直接通过history进行push跳转
7、NavLink 导航标签，拥有activeClassName属性，声明激活样式
8、Prompt 离开组件 <Prompt message="string" when={true/false}/> 路由切换提示文字,when控制文字是否显示
App.js
import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link,NavLink, Redirect} from "react-router-dom"; //高版的里面必须使用react-router-dom，和低版的不一样
//NavLink比Link多了一个激活类名active
import Home from "./components/Home"
import About from "./components/About"
import Other from "./components/Other"
import Detail from "./components/Detail"
import "./App.css"
import Switch from 'react-router-dom/Switch';
class App extends Component {
render() {
return (
<div className="App">
<h1>高版本路由</h1>
<Router>
<div>
<NavLink to="/home">首页</NavLink>
<NavLink to="/about">关于</NavLink>
<NavLink to="/other">其他</NavLink>
<Switch>{/*使用重定向必须要用Switch包裹着，不让会出现一个警告信息*/}
<Route path="/home" component={Home}></Route> {/*显示视图的组件*/}
<Route path="/about" component={About}></Route>
<Route path="/other" component={Other}></Route>
{/*<Route path="/Detail/:id" component={Detail}></Route> */} {/*跟谁在一个视图容器内就并列，没有嵌套这一个说法*/}
<Redirect to="/home"/> {/*路由的重定向*/}
</Switch>
</div>
</Router>
</div>
);
}
}
export default App;
//Route 必须放在Router内，一旦Router存在，所有跟路由相关的组件对象必须放在Router中
//Router中有且只有一个根标签 容器：router中route所在的位置就是该路由容器
Home.js
import React from "react";
import {BrowserRouter as Router,Route,NavLink,Prompt} from "react-router-dom";
import $ from "jquery";
import Detail from "./Detail"
class Home extends React.Component{
constructor(props){
super(props)
this.state={
list:[],
isshow:false
}
}
tap(){
if(this.refs.ipt.value){
this.setState({isshow:true})
}else{
this.setState({isshow:false})
}
}
render(){
return(
<div>
<h1>home</h1>
<input type="text" ref="ipt" onKeyUp={this.tap.bind(this)}/>
<Router>
<div>
{
this.state.list.map(function (item,i) {
return(
<div key={i}>
{/*<p><NavLink to={"/detail/"+item.pid}>{item.pname}</NavLink></p>------params传参*/}
{/*<p><NavLink to={{pathname:"/detail",query:{id:item.pid}}}>{item.pname}</NavLink></p>*/}
<p><NavLink to={{pathname:"/detail",state:{id:item.pid}}}>{item.pname}</NavLink></p>
</div>
)
})
}
{/*<Route path="/detail/:id" component={Detail}></Route>-----嵌套路由params传参*/}
<Route path="/detail" component={Detail}></Route>
</div>
</Router>
<Prompt message="内容没有保存，确定要离开吗?" when={this.state.isshow}/>
</div>
)
}
componentWillMount(){
var _this= this
$.ajax({
type:"get",
url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
async:false,
dataType:"json",
success:function (data) {
_this.setState({list:data.data})
}
})
}
}
export default Home
About.js
import React from "react";
import $ from "jquery";
class About extends React.Component{
constructor(props){
super(props)
this.state={
list:[]
}
}
tap(){
this.props.history.push("/other") //点击跳转到other。高版自动带有history属性
}
render(){
return(
<div>
<h1>About</h1>
<button onClick={this.tap.bind(this)}>跳转到other</button>
</div>
)
}
}
export default About
Other.js
import React from "react";
import $ from "jquery";
class Other extends React.Component{
constructor(props){
super(props)
this.state={
list:[]
}
}
render(){
return(
<div>
<h1>Other</h1>
</div>
)
}
}
export default Other
Detail.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>
<h2>{this.state.detail}</h2>
</div>
)
}
componentWillMount(){
var _this=this;
// $.ajax({
// type:"get",
// url:"http://jx.xuzhixiang.top/ap/api/detail.php",
// async:false,
// dataType:"json",
// data:{id:_this.props.match.params.id},
// success:function(data){
// _this.setState({detail:data.data.pdesc})
// }
// })
$.ajax({
type:"get",
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
async:false,
dataType:"json",
data:{id:_this.props.location.state.id},
success:function(data){
_this.setState({detail:data.data.pdesc})
}
})
}
componentWillReceiveProps(a){ //数据更改的时候页面随之更新
var _this=this;
// $.ajax({ -----------params传参
// type:"get",
// url:"http://jx.xuzhixiang.top/ap/api/detail.php",
// async:false,
// dataType:"json",
// data:{id:a.match.params.id},
// success:function(data){
// _this.setState({detail:data.data.pdesc})
// }
// })
//state和query传参的时候只要吧名字改一下就行
$.ajax({
type:"get",
url:"http://jx.xuzhixiang.top/ap/api/detail.php",
async:false,
dataType:"json",
data:{id:a.location.state.id},
success:function(data){
_this.setState({detail:data.data.pdesc})
}
})
}
}
export default Detail;