在React中使用react-router-dom路由

燕王之雀 發表於 2019-7-15 14:40:00

<div>
<div>
<h2>在React中使用react-router-dom路由</h2>
https://www.jianshu.com/p/8954e9fb0c7e
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。
<h3>安装</h3>
首先进入项目目录，使用npm安装react-router-dom：
<pre class="hljs cpp"><code class="cpp">npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
</code></pre>
<h3>基本操作</h3>
然后我们新建两个页面，分别命名为“home”和“detail”。在页面中编写如下代码：
<pre class="hljs javascript"><code class="javascript">import React from 'react';

export default class Home extends React.Component {
render() {
 return (
 <div>
 <a>去detail</a>
 </div>
 )
}
}
</code></pre>
home.js
<pre class="hljs javascript"><code class="javascript">import React from 'react';

export default class Home extends React.Component {
render() {
 return (
 <div>
 <a>回到home</a>
 </div>
 )
}
}
</code></pre>
detail.js
然后再新建一个路由组件，命名为“Router.js”，并编写如下代码：
<pre class="hljs javascript"><code class="javascript">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;
</code></pre>
如上代码定义了一个纯路由组件，将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面。 
然后在入口文件中——我这里指定的是index.js——编写如下代码：
<pre class="hljs javascript"><code class="javascript">import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

ReactDOM.render(
<Router/>,
document.getElementById('root')
);
</code></pre>
这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果，在地址栏输入“http://localhost:3000/#/”：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="954" data-height="620"><img src="//upload-images.jianshu.io/upload_images/6334988-218f06c2483c59ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/954/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6334988-218f06c2483c59ab.png" data-original-width="954" data-original-height="620" data-original-format="image/png" data-original-filesize="21154"></div>
</div>
<div class="image-caption">home.js</div>
</div>
输入“http://localhost:3000/#/detail”：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="954" data-height="620"><img src="//upload-images.jianshu.io/upload_images/6334988-1acaaedd68e07674.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/954/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6334988-1acaaedd68e07674.png" data-original-width="954" data-original-height="620" data-original-format="image/png" data-original-filesize="22174"></div>
</div>
<div class="image-caption">detail.js</div>
</div>
<h3>通过a标签跳转</h3>
可以看到其实路由已经开始工作了，接下来我们再来做页面间的跳转。在home.js和detail.js中，我们修改如下代码：
<pre class="hljs javascript"><code class="javascript">import React from 'react';

export default class Home extends React.Component {
 render() {
 return (
 <div>
 <a href='#/detail'>去detail</a>
 </div>
 )
}
}
</code></pre>
home.js
<pre class="hljs javascript"><code class="javascript">import React from 'react';

export default class Home extends React.Component {
render() {
 return (
 <div>
 <a href='#/'>回到home</a>
 </div>
 )
}
}
</code></pre>
detail.js 
重新打包运行，在浏览器地址栏输入“http://localhost:3000/”，试试看页面能否正常跳转。如果不能，请按步骤一步一步检查代码是否有误。以上是使用a标签的href进行页面间跳转，此外react-router-dom还提供了通过函数的方式跳转页面。
<h3>通过函数跳转</h3>
首先我们需要修改router.js中的两处代码：
<pre class="hljs python"><code class="python">...
import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';
...
<HashRouter history={hashHistory}>
...
</code></pre>
然后在home.js中： 
import React from 'react';
<pre class="hljs javascript"><code class="javascript">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>
 )
}
}
</code></pre>
在a标签下面添加一个按钮并加上onClick事件，通过this.props.history.push这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props中去，然后就可以在子组件中通过props调用history的push方法跳转页面。
很多场景下，我们还需要在页面跳转的同时传递参数，在react-router-dom中，同样提供了两种方式进行传参。
<h3>url传参</h3>
在router.js中，修改如下代码：
<pre class="hljs xml"><code class="xml">...
<Route exact path="/detail/:id" component={Detail}/>
...
</code></pre>
然后修改detail.js，使用this.props.match.params获取url传过来的参数：
<pre class="hljs cpp"><code class="cpp">...
componentDidMount() {
console.log(this.props.match.params);
}
...
</code></pre>
在地址栏输入“http://localhost:3000/#/detail/3”，打开控制台：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="421" data-height="145"><img src="//upload-images.jianshu.io/upload_images/6334988-28182a2ede7ea1f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/421/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6334988-28182a2ede7ea1f3.png" data-original-width="421" data-original-height="145" data-original-format="image/png" data-original-filesize="5275"></div>
</div>
<div class="image-caption"> </div>
</div>
可以看到传过去的id=3已经被获取到了。react-router-dom就是通过“/:”去匹配url传递的参数。
<h3>隐式传参</h3>
此外还可以通过push函数隐式传参。
修改home.js代码如下：
<pre class="hljs javascript"><code class="javascript">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>
 )
}
}
</code></pre>
在detail.js中，就可以使用this.props.history.location.state获取home传过来的参数：
<pre class="hljs cpp"><code class="cpp">componentDidMount() {
//console.log(this.props.match.params);
console.log(this.props.history.location.state);
}
</code></pre>
跳转后打开控制台可以看到参数被打印：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="365" data-height="85"><img src="//upload-images.jianshu.io/upload_images/6334988-e7b04222dd82d74f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/365/format/webp" alt="" data-original-src="//upload-images.jianshu.io/upload_images/6334988-e7b04222dd82d74f.png" data-original-width="365" data-original-height="85" data-original-format="image/png" data-original-filesize="3556"></div>
</div>
<div class="image-caption"> </div>
</div>
<h3>其他函数</h3>
<h4>replace</h4>
有些场景下，重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转：
<pre class="hljs java"><code class="java">this.props.history.replace('/detail');
</code></pre>
<h4>goBack</h4>
场景中需要返回上级页面的时候使用：
<pre class="hljs css"><code class="css">this.props.history.goBack();
</code></pre>
<h3>总结</h3>
这篇文章基本上涵盖了大部分react-router-dom的用法，此后再发现有什么遗漏我会再继续补充。
</div>
 作者：aimmarc 链接：https://www.jianshu.com/p/8954e9fb0c7e 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。</div> 
来源：https://www.cnblogs.com/shaozhu520/p/11188800.html

頁: [1]

琼殿技术论坛's Archiver

在React中使用react-router-dom路由