react高版路由及传参

版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82429590

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

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

2、引入主要组件对象 

import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'

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"/>    

5、路由参数传递  

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

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

6、事件中进行路由切换跳转

this.props.history.push('/home')    

因为BrowserRouter  相当于 <Router history={history}>故可直接通过history进行push跳转
        

---

高版嵌套路由写法：

<Router>
	<div>
	  {
		this.state.arr.map(function(item,i){
			return(
				<div key={i}>
				  <Link to={{pathname:'/detail',query:{id:item.pid}}}>{item.pname}</Link>
				</div>
			)
		})
	 }
						
	 <hr/>
	<Route path="/detail" component={Detail}></Route>
	</div>
</Router>

然后在所导入的组件引入import Detail from "./detail"

---

7、钩子函数：

componentWillReceiveProps(a)可时时更新传入的新数据，相当于vue的watch( )监听

componentDidMount( ) 接收id并请求数据,但页面数据只能刷新一次

import React from 'react';
import $ from 'jquery'

class Detail extends React.Component{
	constructor(props){
		super(props)
		this.state={
			detail:''
		}
	}
	render(){
		return(
			<div>
				<h2>详情</h2>
				<p>{this.state.detail}</p>
			</div>
		)
	}
	//可时时更新传入的新数据，相当于vue的watch()监听
	componentWillReceiveProps(a){
		var _this=this;
		$.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/detail.php",
			data:{id:a.location.query.id},
			dataType:'json',
			async:true,
			success:function(data){
				_this.setState({detail:data.data.pdesc})
			}
		});
	}
	//接收id并请求数据,但页面数据只能刷新一次
	componentDidMount(){
		var _this=this;
		$.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/detail.php",
			data:{id:_this.props.location.query.id},
			dataType:'json',
			async:true,
			success:function(data){
				_this.setState({detail:data.data.pdesc})
			}
		});
		
	}
	
	
}
export default Detail;

---

完整代码
app.js   高版本路由配置

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'
import Home from './components/home'
import About from './components/about'
import Other from './components/other'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>高版路由</h1>
        
		  <Router>   
					   
			 <div>   {/* 有一个根节点 */}
						
	        		<Link to="/home">首页</Link>
	        		<Link to="/about">关于</Link>
	        		<Link to="/other">其他</Link>
	        		
	        	<Switch>     {/* 解决控制台一片红色问题 */}

					<Route path="/home" component={Home}></Route>
					<Route path="/about" component={About}></Route>
					<Route path="/other" component={Other}></Route>
				      <Redirect to="/home"/>   {/* 路由重定向 */}
	        		
	        	</Switch>
        	</div>
        </Router>
        
      </div>
    );
  }
}

export default App;

 home.js

import React from 'react';
import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'
import $ from 'jquery'
import Detail from './detail'
class Home extends React.Component{
	constructor(props){
		super(props)
		this.state={
			arr:[]
		}
	}
	
	tap(){
		this.props.history.push('/other')
	}
	
	render(){
		return(
			<div>
				<h1> shouye </h1>
				<button onClick={this.tap.bind(this)}>跳转other</button>
				<Router>
					<div>
						{
							this.state.arr.map(function(item,i){
								return(
									<div key={i}>
										<Link to={{pathname:'/detail',query:{id:item.pid}}}>{item.pname}</Link>
									</div>
								)
							})
						}
						
						<hr/>
		        			<Route path="/detail" component={Detail}></Route>
					</div>
				</Router>
			</div>
		)
	}
	
	componentWillMount(){
		var _this=this;
		$.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
			dataType:'json',
			async:true,
			success:function(data){
				_this.setState({arr:data.data})
			}
		});
	}
	
	
}

export default Home;