Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Futur Membre du Club
    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

  2. #2
    Futur Membre du Club
    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

  3. #3
    Membre éprouvé
    salut,

    pourquoi ne pas utiliser react-router ?
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  4. #4
    Futur Membre du Club
    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

  5. #5
    Membre éprouvé
    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()
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  6. #6
    Futur Membre du Club
    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

###raw>template_hook.ano_emploi###