React 路由基本配置、傳值、編程式路由

在github官網上搜索react-router：

一、路由配置

安裝路由：cnpm install react-router-dom --save
引入import { BrowserRouter as Router, Route, Link } from "react-router-dom"
在組件根節點外面包裹一層<Router></Router>標籤
根據路徑跳轉 <Route path="/news" component={News} /> 其中path是路徑，component對應着組件（此時輸入對應路徑即可跳轉到對應頁面）
<Link to="/new">News</Link> 用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 (
            <div>
                <Router>
                    {/* 路由的入口  屬性：to*/}
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/news">News</Link>
                        </li>
                        <li>
                            <Link to="/my">My</Link>
                        </li>
                    </ul>
                    <hr/>
                    {/* 配置路由  
                        屬性：path component 
                        exact爲Route的屬性，爲bool類型（true爲嚴格匹配 false爲普通匹配）
                    */}
                    <Route exact path="/" component={Home}></Route>
                    <Route path="/news" component={News}></Route>
                    <Route path="/my" component={My}></Route>
                </Router>
            </div>
        )
    }
}

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 (
            <div>
                <Router>
					{/* 1. 固定傳值 */}
                    <Link to="/news/1">News</Link>  
                    {/* 2. 拼接傳值 */}
                    <Link to={'/news/'+this.state.id}>News</Link>  
                    {/* 3. ES6模板傳值 */}
                    <Link to={`/news/${this.state.id}`}>News</Link>
                    <hr/>
                    <Route path="/news/:uid" component={News}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;

News.js中取值：

import React from 'react';

class News extends React.Component {
    componentDidMount(){
        console.log(this.props.match.params.uid);
    }
    render() {
        return (
            <div>News</div>
        );
    }
}

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 (
            <div>
                <Router>
                	<Link to={`/news/${this.state.id}/${this.state.name}`}>News</Link>
                    <hr/>
                    <Route path="/news/:uid/:uname" component={News}></Route>
                </Router>
            </div>
        )
    }
}

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 (
            <div>
                <Router>
                	<Link to="/my?id=6&name=ikun">My</Link>
                    <Route path="/my" component={My}></Route>
                </Router>
            </div>
        )
    }
}

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 (
            <div>My</div>
        );
    }
}

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 (
            <div>My</div>
        );
    }
}

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 (
            <div>
                <Router>
                    <h3>動態路由傳值</h3>
                    {
                        this.state.arr.map((value,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/dyvalue/${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    <Route path="/dyvalue/:aid" component={dyValue}></Route>
                    <h3>get方式傳值</h3>
                    {
                        this.state.arr.map((value,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/getvalue?aid=${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    <Route path="/getvalue" component={getValue}></Route>
                </Router>
            </div>
        )
    }
}

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 (
            <div>
                News
                <hr/>
                <button onClick={this.toLocation}>跳轉</button>
                <Router>
                    <ul>
                        <li>
                            <Link to="/News/child1/86">child1</Link>
                        </li>
                        <li>
                            <Link to="/News/child2">child2</Link>
                        </li>
                    </ul>
                    <Route exact path="/News/child1/:id" component={child1}></Route>
                    <Route path="/News/child2" component={child2}></Route>
                </Router>
            </div>
        );
    }
}

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 (
            <div>Home</div>
        );
    }
}

export default Home;

child1.js（子路由）：

import React from 'react';

class child1 extends React.Component {
    toFather=()=>{
        this.props.history.push("/");
    }
    render() {
        return (
            <div>子路由1
                <button onClick={this.toFather}>子路由1跳轉</button>
            </div>
        );
    }
}

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 (
            <div>子路由2
                <button onClick={this.toLocation}>子路由2跳轉</button>
            </div>
        );
    }
}

export default child2;