react初见路由

第一种传有限参数

首先创建路由,在创建路由之前要安装关于路由的插件，下这个命令

npm install react-router-dom --save-dev
//安装完以后就会在package.json中看到这个代码，代表安装成功
"devDependencies": {
    "react-router-dom": "^5.0.0"
  }

1. 创建/router/index.js文件，代码如下

/*
 HashRouter:有#号
 BrowserRouter:没有#号
 Switch:只要匹配到一个地址不往下匹配，相当于for循环里面的break
 Link:跳转页面，相当于vue里面的router-link
 exact :完全匹配路由
* */

import React, {Fragment} from 'react';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import App from "../App";
import NewsIndex from "../pages/news/index";
import NewsDetail from "../pages/news/details";

export default class RouterComponent extends React.Component {
    render() {
        return (
            //下面的代码固定模式
            <Fragment>
                <Router>
                    <Fragment>
                        <Switch>
                            {/*导入App组件  exact指的是完全匹配 /  这是路由*/}
                            <Route exact path="/" component={App}/>
                            {/* path是 调用路由路径   NewsIndex是我创建的组件，新闻列表*/}
                            <Route path="/news/index" component={NewsIndex}/>
                            {/* /:id 传参数id     /:title传参数标题  这个有一个局限性，定义完路由后只能传固定的参数*/}
                            <Route path="/news/details/:id/:title" component={NewsDetail}/>
                        </Switch>
                    </Fragment>
                </Router>
            </Fragment>
        )
    }
}

2. 在src下的index.js里面改变入口，改成路由组件

// 原来的默认代码 ReactDOM.render(<App/>, document.getElementById('root'));
ReactDOM.render(<RouterComponent/>, document.getElementById('root'));

3. 在<App/>组件中加入一个按钮

<button onClick={this.toNewsIndex.bind(this,'/news/index')}>点击跳转新闻界面</button>
//跳转新闻列表界面的方法
    toNewsIndex(path) {
        this.props.history.push(path)
}

4. 新闻列表界面

import React from 'react';
import {HashRouter as Router, Route, Switch, Link} from 'react-router-dom';

export default class NewsIndex extends React.Component {
    render() {
        return (
            <div>
                <div>我是新闻界面</div>
                <ul>
               		 {/*Link是跳转页面标签  /1/新闻头条一 是传的id和title参数 */}
                    <li><Link to='/news/details/1/新闻头条一'>新闻头条一</Link></li>
                    <li><Link to='/news/details/2/新闻头条二'>新闻头条二</Link></li>
                </ul>
            </div>
        )
    }
	 //跳转新闻详情界面
    toNewsDetailThree(path){
        this.props.history.push(path)
    }
}

5. 新闻详情界面

import React from 'react';

export default class detailsIndex extends React.Component {
    componentWillMount() {
        //打印出路径和参数
        console.log(this.props);
    }
    render() {
        //获取参数
        let id = this.props.match.params.id;
        let title = this.props.match.params.title;
        return (
            <div>
                我是新闻详情页,id为{id}，标题为{title}
            </div>
        )
    }
}

第二种可以传无限参数用法可以结合上面的代码来看
1、设置路由

 <Route path="/news/details" component={NewsDetail}/>

2、新闻列表页点击跳转条目可以这样写

 <li onClick={this.toNewsDetailThree.bind(this,'/news/details?id=3&title=新闻头条三')}>新闻头条三</li>

3、新闻详情页获取参数

		//获取参数
        let id = localParam(this.props.location.search).search.id;
        //由于中文传过去乱码，所以用decodeURIComponent解析，localParam是用来解析 ?id=3&title=新闻头条三   这串
        let title = decodeURIComponent(localParam(this.props.location.search).search.title);

4、解析?id=3&title=新闻头条三 用到的方法

function localParam (search, hash) {
    search = search || window.location.search;
    hash = hash || window.location.hash;
    var fn = function(str, reg) {
        if (str) {
            var data = {};
            str.replace(reg, function($0, $1, $2, $3) {
                data[$1] = $3;
            });
            return data;
        }
    }
    return {
        search : fn(search, new RegExp("([^?=&]+)(=([^&]*))?", "g")) || {},
        hash : fn(hash, new RegExp("([^#=&]+)(=([^&]*))?", "g")) || {}
    }
}
export {
    localParam
}

不记入记录的跳转，比如A->B->C，如果B->C跳转采用的是this.props.history.replace(path)，那么C点返回键回到的是A

//用法类似this.props.history.push(path)，
this.props.history.replace(path)

返回上一个页面的方法

 this.props.history.goBack();