21 salta ruta camino

1, empujar

2, reemplace

empujar, añadir un historial de rutas, reemplace la última ruta es una historia alternativa, tenga en cuenta la diferencia

Se puede definir, respectivamente, utilizando el método de empuje y la ruta salto sustituir, para comparar el efecto,

 

 Por ejemplo, cuando el empuje después de hacer clic message01, MessageDetails muestran detalles de message01, empujar los message02 clic, MessageDetails muestran detalles después de message02,

 A continuación, en la parte posterior, será devuelto a message01

 Sin embargo,

 Cuando el empuje después de hacer clic message01, MessageDetails Mostrar detalles message01 después del clic message02 sustituir, MessageDetails muestran detalles después de message02,

 A continuación, en la parte de atrás, no volverá a message01, pero regresó a los mensajes (la barra de direcciones), porque message01 reemplazados el enrutamiento de message01 historia.

3, hacia adelante

　　historia de la GOFORWARD (método)

4 Volver

　　historia de foBack (método)

Además, hay que prestar atención al salto no envía la solicitud de enrutamiento, salto no enrutado envía una solicitud,

Entre ellos, es un no-encaminamiento de la página de salto a salto, métodos de uso para lograr window.location

1 Reaccionar importación, {Componente} de  ' reaccionar ' 
2 importación {NavLink, Route} de  ' reaccionar de enrutador dom ' 
3  
4  
5 MessagesDetails importación de  ' ../messagesdetails/messagesdetails ' 
6  
7 exportación predeterminado  de clase Mensajes extiende Componente {
 8      STATE = {
 9          messagesArr: []
 10      }
 11      componentDidMount () {
 12          Sea {messagesArr} = esta .state;
13         = messagesArr [
 14              {ID: . 1 , título: ' message01 ' , contenido: ' Hola, message01 ' },
 15              {ID: 2 , título: ' message02 ' , contenido: ' Hola, message02 ' },
 16              {ID : . 3 , título: ' message03 ' , contenido: ' Hola, message03 ' }]
 17.          el este .setState (messagesArr {})
 18 es      }
 19.     
20      // empujar 
21      showDetails1 = (id) => {
 22          esta .props.history.push ( `/ home / mensajes / messagesdetails / $ {id}`);
23      }
 24  
25      // reemplazar 
26      showDetails2 = (id) => {
 27          esta .props.history.replace ( `/ home / mensajes / messagesdetails / $ {ID}`);
28      }
 29  
30      // 前进
31      = forward () => {
 32          esta .props.history.goForward ();
33      }
 34  
35      // 后退
36      back = () => {
 37          esta .props.history.goBack ();
38      }
 39  
40      // 页面跳转
41      goBaidu = () => {
 42          window.location = " http://www.baidu.com " ;
43      }
 44  
45      render () {
 46          const {messagesArr} = esta .state;
47          de retorno (
 48              <div>
 49                  <ul>
 50                      {
 51                         messagesArr.map ((mensaje, índice) => 
 52                          <li clave = {index}>
 53                              <NavLink a = { `/ home / mensajes / messagesdetails / $ {}` message.id}> {message.title} </ NavLink>
 54                              & nbsp; & nbsp; <botón onClick = {() => { este .showDetails1 (message.id)}}> empuje </ botón>
 55                              & nbsp; & nbsp; <botón onClick = {() => { esto . showDetails2 (message.id)}}> reemplace </ botón>
 56                          </ li>
57                          )
 58                      }
 59                  </ ul>
 60                  & nbsp; & nbsp; <botón onClick = { este .forward}>前进</ botón>
 61                   & nbsp; & nbsp; <botón onClick = { este .luz}>后退</ botón>
 62                   & nbsp; & nbsp; botón <onClick = { este .goBaidu}>页面跳转</ botón>
 63                  <trayectoria de la ruta = " / home / mensajes / messagesdetails /: id " = el componente {MessagesDetails} />
 64              </ div>
 65          )
 66      }
 67 }

También hay necesidad de tener en cuenta que:

showDetails1 y showDetails2 estos dos métodos, que necesitan recibir parámetros, y en el botón utilizando this.showDetails es incapaz de pasar parámetros, por lo que utilizar

<Botón onclick = {() => {this.showDetails (message.id)}}?> </ Botón> parámetros de transmisión de paso, es una manera de dejar pasar los parámetros de la función de devolución de llamada.