21 路由跳转的方式

1，push

2，replace

push，添加一个路由历史，replace 是替代最后一个路由历史，注意区别

可分别定义使用 push 和使用 replace 进行路由跳转的方法，进行效果的比对，

比如，当点击 message01 后的 push ，MessageDetails 显示 message01的详情，再点击 message02 后的 push ，MessageDetails 显示 message02 后的详情，

然后点击后退，会退回到 message01

然而，

当点击 message01 后的 push ，MessageDetails 显示 message01的详情，再点击 message02 后的 replace ，MessageDetails 显示 message02 后的详情，

然后点击后退，不会退回到 message01，而是退回到 messages（地址栏上）, 因为 message01 取代了 message01 的路由历史。

3, 前进

　　history中的 goForward() 方法

4，后退

　　history 中的 foBack() 方法

另外我们要注意路由跳转不会发送请求，非路由跳转会发送请求，

其中，页面跳转就属于非路由跳转，使用 window.location 方法实现

 1 import React, { Component } from 'react'
 2 import {NavLink,Route} from 'react-router-dom'
 3 
 4 
 5 import MessagesDetails from '../messagesdetails/messagesdetails'
 6 
 7 export default class Messages extends Component {
 8     state={
 9         messagesArr:[]
10     }
11     componentDidMount(){
12         let {messagesArr}=this.state;
13         messagesArr = [
14             { id: 1, title: 'message01', content: '你好,message01'},
15             { id: 2, title: 'message02', content: '你好,message02'},
16             { id: 3, title: 'message03', content: '你好,message03'}]
17         this.setState({messagesArr})
18     }
19     
20     //push
21     showDetails1=(id)=>{
22         this.props.history.push(`/home/messages/messagesdetails/${id}`);
23     }
24 
25     //replace
26     showDetails2 = (id) => {
27         this.props.history.replace(`/home/messages/messagesdetails/${id}`);
28     }
29 
30     //前进
31     forward=()=>{
32         this.props.history.goForward();
33     }
34 
35     //后退
36     back=()=>{
37         this.props.history.goBack();
38     }
39 
40     //页面跳转
41     goBaidu=()=>{
42         window.location="http://www.baidu.com";
43     }
44 
45     render() {
46         const {messagesArr}=this.state;
47         return (
48             <div>
49                 <ul >
50                     {
51                         messagesArr.map((message, index) => 
52                         <li key={index}>
53                             <NavLink to={`/home/messages/messagesdetails/${message.id}`}>{message.title}</NavLink>
54                             &nbsp;&nbsp;<button onClick={() => { this.showDetails1(message.id)}}>push</button>
55                             &nbsp;&nbsp;<button onClick={() => { this.showDetails2(message.id)}}>replace</button>
56                         </li>
57                         )
58                     }
59                 </ul>
60                  &nbsp;&nbsp;<button onClick={this.forward}>前进</button>
61                  &nbsp;&nbsp;<button onClick={this.back}>后退</button>
62                  &nbsp;&nbsp;<button onClick={this.goBaidu}>页面跳转</button>
63                 <Route path="/home/messages/messagesdetails/:id" component={MessagesDetails} />
64             </div>
65         )
66     }
67 }

这里还需要注意的是：

showDetails1 和 showDetails2 这两个方法，我们需要接收参数，而在 button 中，使用 this.showDetails 是无法传递参数的，所以我们使用

<button onClick={ ( ) => { this.showDetails( message.id ) } } ></button> 的方式传递参数，是一种让回调函数传递参数的办法。

21 路由跳转的方式

猜你喜欢