Discussion :

[Cedinho]

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

[Cedinho]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[gwyohm]

salut,

pourquoi ne pas utiliser react-router ?

[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

[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()

[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