在React
中,常用的有两个包可以实现这个需求,那就是react-router
和react-router-dom
。本文主要针对react-router-dom
进行说明。
二、安装
首先进入项目目录,使用npm
安装react-router-dom
:
npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
三、基本操作
然后我们新建两个页面,分别命名为“home”和“detail”。在页面中编写如下代码:
home.js
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a>去detail</a>
</div>
)
}
}
detail.js
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a>回到home</a>
</div>
)
}
}
然后再新建一个路由组件,命名为“router.js”,并编写如下代码:
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail" component={Detail}/>
</Switch>
</HashRouter>
);
export default BasicRoute;
如上代码定义了一个纯路由组件,将两个页面组件Home和Detail使用Route
组件包裹,外面套用Switch
作路由匹配,当路由组件检测到地址栏与Route
的path
匹配时,就会自动加载相应的页面。
然后在入口文件index.js
编写如下代码:
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';
ReactDOM.render(
<Router/>,
document.getElementById('root')
);
这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果,在地址栏输入“http://localhost:3000/#/
”。
四、通过 a 标签跳转
可以看到其实路由已经开始工作了,接下来我们再来做页面间的跳转。在home.js和detail.js中,我们修改如下代码:
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a href='#/detail'>去detail</a>
</div>
)
}
}
home.js
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a href='#/'>回到home</a>
</div>
)
}
}
重新打包运行,在浏览器地址栏输入“http://localhost:3000/
”,试试看页面能否正常跳转。如果不能,请按步骤一步一步检查代码是否有误。以上是使用a
标签的href
进行页面间跳转,此外react-router-dom
还提供了通过函数的方式跳转页面。
五、通过函数跳转
首先我们需要修改router.js中的两处代码:
...
import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';
...
<HashRouter history={hashHistory}>
...
然后在home.js中:
import React from 'react';
export default class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<a href='#/detail'>去detail</a>
<button onClick={() => this.props.history.push('detail')}>通过函数跳转</button>
</div>
)
}
}
在a
标签下面添加一个按钮并加上onClick
事件,通过this.props.history.push
这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props
中去,然后就可以在子组件中通过props
调用history
的push
方法跳转页面。
很多场景下,我们还需要在页面跳转的同时传递参数,在react-router-dom
中,同样提供了两种方式进行传参。
url传参
在router.js
中,修改如下代码:
...
<Route exact path="/detail/:id" component={Detail}/>
...
然后修改detail.js,使用this.props.match.params
获取url传过来的参数:
...
componentDidMount() {
console.log(this.props.match.params);
}
...
在地址栏输入“http://localhost:3000/#/detail/3
”,打开控制台,可以看到传过去的id=3已经被获取到了。react-router-dom
就是通过“/:
”去匹配url
传递的参数。
隐式传参
此外还可以通过push
函数隐式传参。
修改home.js代码如下:
import React from 'react';
export default class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<a href='#/detail/3'>去detail</a>
<button onClick={() => this.props.history.push({
pathname: '/detail',
state: {
id: 3
}
})}>通过函数跳转</button>
</div>
)
}
}
在detail.js中,就可以使用this.props.history.location.state
获取home传过来的参数:
componentDidMount() {
//console.log(this.props.match.params);
console.log(this.props.history.location.state);
}
跳转后打开控制台可以看到参数被打印。
六、其他函数
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。