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

正义机长佐巴杨 發表於 2019-9-23 19:50:00

<p> </p>
<p><strong>安装</strong></p>
<p> <span class="cnblogs_code"><span style="color: rgba(0, 128, 128, 1)">1</span> npm install react-router-dom --save-dev <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">这里可以使用cnpm代替npm命令</span></span> </p>
<p><strong>基本操作</strong></p>
<p>我们新建两个页面，分别命名为‘home’和‘mine’。这页面中编写如下代码：</p>
<div class="cnblogs_code">
<pre> import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
</span> //home.js
export <span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Home extends React.Component {
</span> <span style="color: rgba(0, 0, 0, 1)"> render() {
</span>       <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span>          <div>
            <a>去mine</a>
         </div>
<span style="color: rgba(0, 0, 0, 1)">    )
</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span> }</pre>
</div>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">mine.js</span>
import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
</span>
export <span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Mine extends React.Component {
</span> <span style="color: rgba(0, 0, 0, 1)"> render() {
</span>       <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span>          <div>
            <a>回到home</a>
      </div>
<span style="color: rgba(0, 0, 0, 1)">    )
</span> <span style="color: rgba(0, 0, 0, 1)"> }
</span> }</pre>
</div>
<p>然后再新建一个路由组件，命名为‘Router.js’，并编写如下代码：</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import {HashRouter, Route, Switch} from </span>'react-router-dom'<span style="color: rgba(0, 0, 0, 1)">;
import Home from </span>'../home'<span style="color: rgba(0, 0, 0, 1)">;
import Mine from </span>'../Mine'<span style="color: rgba(0, 0, 0, 1)">;

const BasicRoute </span>= () =><span style="color: rgba(0, 0, 0, 1)"> (
</span><HashRouter>
   <Switch>
         <Route exact path="/" component={Home}/>
         <Route exact path="/Mine" component={Mine}/>
   </Switch>
</HashRouter>
<span style="color: rgba(0, 0, 0, 1)">);

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> BasicRoute;</pre>
</div>
<p>如上代码定义了一个纯路由组件，将两个页面组件Home和Mine使用Router组件包裹，外面套用Swicth做路由匹配，当路由组件检测到地址栏与Router的path匹配时，就会自动加载响应的页面。然后在入口文件中——我们这里指定的是index.js——编写如下代码：</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import ReactDOM from </span>'react-dom'<span style="color: rgba(0, 0, 0, 1)">;
import Router from </span>'./router/router'<span style="color: rgba(0, 0, 0, 1)">;

ReactDOM.render(
</span><Router/>,
document.getElementById('root'<span style="color: rgba(0, 0, 0, 1)">)
);</span></pre>
</div>
<p>这里相当于向页面返回了一个路由组件，我们先运行项目看一下效果，在地址栏输入“http://localhost:3000/#/”：</p>
<p><img src="https://img2018.cnblogs.com/blog/1483888/201909/1483888-20190923171702456-2104500664.png"></p>
<p> </p>
<p> </p>
<p> 输入“http://localhost:3000/#/detail”：</p>
<p><img src="https://img2018.cnblogs.com/blog/1483888/201909/1483888-20190923171747610-855056905.png"></p>
<p> </p>
<p> <strong>通过a标签跳转</strong></p>
<p>可以看到其实路由已经开始工作了，接下来我们再来做页面间的跳转，在home.js和mine.js中，我们修改如下代码：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">home.js</span>
import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Home extends React.Component {
render() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
         </span><div>
            <a href='#/mine'>去mine</a>
         </div>
<span style="color: rgba(0, 0, 0, 1)">    )
}
}</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">mine.js</span>
import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Mine extends React.Component {
render() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
         </span><div>
            <a href='#/'>回到home</a>
         </div>
<span style="color: rgba(0, 0, 0, 1)">    )
}
}</span></pre>
</div>
<p>重新打包运行，在浏览器地址栏输入“http://localhost:3000/”，试试看页面能否正常跳转。如果不能，请按步骤一步一步检查代码是否有误。以上是使用a标签的href进行页面间跳转，此外react-router-dom还提供了通过函数的方式跳转页面。</p>
<h3>通过函数跳转</h3>
<p>首先我们需要修改router.js中的两处代码：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">...
import {HashRouter, Route, Switch, hashHistory} from </span>'react-router-dom'<span style="color: rgba(0, 0, 0, 1)">;
...
</span><HashRouter history={hashHistory}><span style="color: rgba(0, 0, 0, 1)">
...</span></pre>
</div>
<p>然后在home.js中：</p>
<p>import React from ‘react’</p>
<div class="cnblogs_code">
<pre>export <span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Home extends React.Component {
constructor(props) {
   super(props);
}

render() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
         </span><div>
            <a href='#/detail'>去detail</a>
            <button onClick={() => <span style="color: rgba(0, 0, 255, 1)">this</span>.props.history.push('detail')}>通过函数跳转</button>
         </div>
<span style="color: rgba(0, 0, 0, 1)">    )
}
}</span></pre>
</div>
<p>在a标签下面添加一个按钮并加上onClick事件，通过this.props.history.push这个函数跳转都mine页面，在路由组件中加入的代码就是将history这个对象注册到组件的props中去，然后就可以在子组件中通过props调用history的push方法跳转页面。</p>
<p> </p>
<p>很多场景下，我们还需要在页面跳转的同时传递参数，在react-router-dom中，同样提供了两种方式进行传参。</p>
<p><strong>url传参</strong></p>
<p>在router.js，修改如下代码：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">...
</span><Route exact path="/detail/:id" component={Detail}/>
...</pre>
</div>
<p>然后修改detail.js，使用this.props.match.params获取url传过来的参数：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">...
componentDidMount() {
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.match.params);
}
...</span></pre>
</div>
<p>在地址栏输入“http://localhost:3000/#/detail/3”，打开控制台：</p>
<p><img src="https://img2018.cnblogs.com/blog/1483888/201909/1483888-20190923194731335-1578308612.png"></p>
<p> </p>
<p> 可以看到传过去的id=3已经被获取到了。react-router-dom就是通过“/:”去匹配url传递的参数</p>
<h3>隐式传参</h3>
<p>此外还可以通过push函数隐式传参。</p>
<p>修改home.js代码如下：</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class Home extends React.Component {
constructor(props) {
   super(props);
}

render() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
         </span><div>
            <a href='#/detail/3'>去detail</a>
               <button onClick={() => <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.history.push({
                     pathname: </span>'/detail'<span style="color: rgba(0, 0, 0, 1)">,
                     state: {
                        id: </span>3<span style="color: rgba(0, 0, 0, 1)">
                     }
            })}</span>>通过函数跳转</button>
         </div>
<span style="color: rgba(0, 0, 0, 1)">    )
}
}</span></pre>
</div>
<p>在detail.js中，就可以使用this.props.history.location.state获取home传过来的参数：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">componentDidMount() {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">console.log(this.props.match.params);</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.history.location.state);
}</span></pre>
</div>
<p>跳转后打开控制台可以看到参数被打印：</p>
<p><img src="https://img2018.cnblogs.com/blog/1483888/201909/1483888-20190923194857706-1638527213.png"></p>
<h3>其他函数</h3>
<h4>replace</h4>
<p>有些场景下，重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.props.history.replace('/detail');</pre>
</div>
<h4>goBack</h4>
<p>场景中需要返回上级页面的时候使用：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.props.history.goBack();</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/bokeyanghao/p/11574351.html

頁: [1]

琼殿技术论坛's Archiver

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