React 路由基本配置、传值、编程式路由
在github官网上搜索react-router：
一、路由配置
-
安装路由：
cnpm install react-router-dom --save -
引入
import { BrowserRouter as Router, Route, Link } from "react-router-dom" -
在组件根节点外面包裹一层
-
根据路径跳转
-
News用Link标签模拟一个人a标签,点击跳转
- 路由安装完毕之后，配置文件：
import React from 'react';
//导入路由
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
//导入路由子组件
import Home from './Home';
import News from './News';
import My from './My';
class Main extends React.Component{
render(){
return (
{/* 路由的入口 属性：to*/}
-
Home
-
News
-
My
{/* 配置路由
属性：path component
exact为Route的属性，为bool类型（true为严格匹配 false为普通匹配）
*/}
)
}
}
export default Main;
二、传值
- 动态路由传值
（1）传单个值
Main.js：
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import News from './News';
class Main extends React.Component{
constructor(props){
super(props);
this.state={
id:66
}
}
render(){
return (
{/* 1. 固定传值 */}
News
{/* 2. 拼接传值 */}
News
{/* 3. ES6模板传值 */}
News
)
}
}
export default Main;
News.js中取值：
import React from 'react';
class News extends React.Component {
componentDidMount(){
console.log(this.props.match.params.uid);
}
render() {
return (
News
);
}
}
export default News;
（2）传多个值
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import News from './News';
class Main extends React.Component{
constructor(props){
super(props);
this.state={
id:66,
name:"易安"
}
}
render(){
return (
News
)
}
}
export default Main;
- get 传值（相当于在路径上加 ？id=1）
- 路由的get传值，值在location的search，可以写算法进行解析，也可安装node的url模块进行解析。
Main.js：
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import My from './My';
class Main extends React.Component{
render(){
return (
My
)
}
}
export default Main;
（1）算法解析
My.js：
import React from 'react';
class My extends React.Component {
componentDidMount(){
let locurl=this.props.location.search;
this.changeUrl(locurl);
}
changeUrl=(locurl)=>{
let u=locurl.replace("?","");
let ur=u.replace(/=/g,":").replace("&",",");
console.log(ur.split(",")[0].split(":")[1]);
}
render() {
return (
My
);
}
}
export default My;
（2）url模块解析
import React from 'react';
import url from 'url';
class My extends React.Component {
componentDidMount(){
let locurl=this.props.location.search;
let data=url.parse(locurl,true).query;
console.log(data);
}
render() {
return (
My
);
}
}
export default My;
- 数组中的数据进行传值
动态路由传值+get传值：
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import dyValue from './dyValue';
import getValue from './getValue';
class Main extends React.Component{
constructor(props){
super(props);
this.state={
arr:[
{
aid:1,
title:"Vue"
},
{
aid:2,
title:"React"
},
{
aid:3,
title:"Node"
}
]
}
}
render(){
return (
动态路由传值
{
this.state.arr.map((value,index)=>{
return (
{value.title}
)
})
}
get方式传值
{
this.state.arr.map((value,index)=>{
return (
{value.title}
)
})
}
)
}
}
export default Main;
在对应跳转页面参数值：
componentDidMount() {
console.log(this.props.match.params.aid); //动态路由取值
console.log(this.props.location.search); //get取值，取出来的是?aid=1这种格式，需手动转或引入url模块，进行路由解析
}
四、路由嵌套+编程式路由+传值
- 路由的跳转：任何需要跳转的地方使用
this.props.history.push('/path')就可以进行跳转 - 参数的获取：使用
this.props.match.params.xxx可以获取到当前路由的参数
News.js（父路由）：
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import child1 from './child1';
import child2 from './child2';
class News extends React.Component {
//News向Home路由传值
toLocation=()=>{
//跳转时可以带参，跳转的页面获取值时可用this.props.location.state
this.props.history.push("/",{id:99});
}
render() {
return (
News
-
child1
-
child2
);
}
}
export default News;
Home.js（News.js的同级路由）：
import React from 'react';
class Home extends React.Component {
//接收从News路由传递的id值
componentDidMount(){
console.log(this.props.location.state);
}
render() {
return (
Home
);
}
}
export default Home;
child1.js（子路由）：
import React from 'react';
class child1 extends React.Component {
toFather=()=>{
this.props.history.push("/");
}
render() {
return (
子路由1
);
}
}
export default child1;
child2.js（子路由）：
import React from 'react';
class child2 extends React.Component {
//子路由2跳转到子路由1
toLocation=()=>{
this.props.history.push("/News/child1/86");
}
render() {
return (
子路由2
);
}
}
export default child2;