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
    Homme Profil pro
    Lycéen
    Inscrit en
    juillet 2018
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : juillet 2018
    Messages : 15
    Points : 9
    Points
    9
    Par défaut 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
    Homme Profil pro
    Lycéen
    Inscrit en
    juillet 2018
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : juillet 2018
    Messages : 15
    Points : 9
    Points
    9
    Par défaut
    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é
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    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
    Homme Profil pro
    Lycéen
    Inscrit en
    juillet 2018
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : juillet 2018
    Messages : 15
    Points : 9
    Points
    9
    Par défaut
    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é
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    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
    Homme Profil pro
    Lycéen
    Inscrit en
    juillet 2018
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : juillet 2018
    Messages : 15
    Points : 9
    Points
    9
    Par défaut
    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

Discussions similaires

  1. Réponses: 4
    Dernier message: 02/12/2015, 17h31
  2. Changer une url dans un objet embed sans recharger la page
    Par Kalidor62 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 19/11/2014, 13h56
  3. Réécrire dans un div sans recharger la page
    Par Daviloppeur dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/05/2011, 18h07
  4. [MySQL] Insertion dans une base de donnée sans recharger la page?
    Par nadia lydia dans le forum PHP & Base de données
    Réponses: 11
    Dernier message: 02/10/2009, 18h43
  5. Changer la police avec un select, sans recharger la page
    Par Netoman dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 30/12/2004, 19h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo