第一种传有限参数
首先创建路由,在创建路由之前要安装关于路由的插件,下这个命令
npm install react-router-dom --save-dev
//安装完以后就会在package.json中看到这个代码,代表安装成功
"devDependencies": {
"react-router-dom": "^5.0.0"
}
- 创建/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>
)
}
}
- 在src下的index.js里面改变入口,改成路由组件
// 原来的默认代码 ReactDOM.render(<App/>, document.getElementById('root'));
ReactDOM.render(<RouterComponent/>, document.getElementById('root'));
- 在
<App/>
组件中加入一个按钮
<button onClick={this.toNewsIndex.bind(this,'/news/index')}>点击跳转新闻界面</button>
//跳转新闻列表界面的方法
toNewsIndex(path) {
this.props.history.push(path)
}
- 新闻列表界面
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)
}
}
- 新闻详情界面
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();