Naviguer dans l'historique sans recharger la page

Version imprimable

07/02/2020, 22h17
Cedinho

Naviguer dans l'historique sans recharger la page

Bonsoir à tous
Svp j'aimerais creer un composant react contenant deux bouttons (Back et Next) me permettant d'agir exactement comme les bouttons du navigateurs Avancer et Reculer mais sans avoir a recharger completement la page, donc en gardant le le système SPA de react sans jamais actualiser la page.
J'ai déja regardé du côté de history.back et ses autres méthodes mais celui ci recharge la page.
J'ai aussi regarder du côté de react-router-dom mais sans résultats concluants.
Quelqu'un pourrait il me débloquer svp :(

J'ai éssayer d'implémenter un petit module pour régler le soucis. Il marche jusqu'à un certains niveau car je réussis quand même a reculer et avncer sans recharger la page mais il possède de nombreuses défaillances et ne fonctionne pas vraiment comme ce que je veux.
voici le code du module

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
const url = []
exports.addUrl = function (route) {
    url.push({state : window.history.state , lien : route})
}
exports.goBack = function () {
    for (let index = 0; index < url.length; index++) {
      if (url[index].state.page == window.history.state.page) {
        if(index > 0){
          window.history.pushState(url[index-1].state,'page',url[index-1].lien)
          return
        }else{
          window.history.pushState({page : 'page1'},'page','/')
        }
 
      }
 
    } 
}
 
exports.goForward = function () {
    for (let index = 0; index < url.length; index++) {
      if (url[index].state.page == window.history.state.page) {
        if(index < url.length-1){
          window.history.pushState(url[index+1].state,'page',url[index+1].lien)
          return
        }else{
          //window.history.pushState(url[index].state,'page',url[index].lien)
        }
 
      }
 
    } 
}

et le code de mon App.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
import React from 'react';
import logo from './logo.svg';
import './App.css';
import History from './history/index'
var a = 0;
function inc(){
  return ++a;
}
function add(){
  let a = inc();
  window.history.pushState({page : 'page'+a},"page","/test"+a)
  History.addUrl("/test"+a)
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        //boutton pour simuler une navigation avec un clic sur un lien en chargeant a chaque fois une page différente
        <button onClick = { () => add()}>Lancer</button>
      </header>
      <div>
             <button type='button' onClick = {() => History.goBack()}>Back</button>
             <button type='button' onClick = {() => History.goForward()}>Next</button>
       </div>
    </div>
  );
}
 
export default App;

Si vous pouvez m'aider à corriger mon code ou alors me donner une tout autre solution pour réaliser ma navigation

08/02/2020, 09h33
gwyohm

salut,

pourquoi ne pas utiliser react-router ?
08/02/2020, 13h47
Cedinho

j'ai éssayer mais react-router ne me permet pas d'accéder a l'historique du navigateur.
Ou alors je ne sais pas comment utiliser react-router pour creer des bouttons avancer et reculer en fonction de l'historique de navigation
14/02/2020, 11h21
gwyohm
Salut,

Le router a un membre history dont la doc est ici:
https://github.com/ReactTraining/his.../Navigation.md

dedans, on a notamment
- history.goBack()
- history.goForward()
15/02/2020, 00h06
Cedinho

Bonsoir
oui merci j'ai vu history.goBack et history.goForward dans mes recherches mais le problème est que ces fonctions recharge la page donc elles agissent exactement comme les bouttons du navigateur; or moi je veux faire comme les bouttons du navigateur mais sans reload la page