9
votes

Supprimer le paramètre de requête de l'URL

J'ai l'URL suivante:

http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860#/homepage

Et je souhaite rediriger vers:

import { push } from 'react-router-redux'

...

dispatch(push('/homepage'))

Je le fais avec: p >

http://my.site#/homepage

Mais react m'amène à:

http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860

Comment puis-je dire à React de déposer le paramètre de requête dans la barre d'adresse du navigateur sans recharger l'application ?

javascript reactjs react-router query-parameters

9 commentaires

Qu'est-ce que push (...) ?

@Titus decembersoft.com/posts/… github.com/reactjs/… < a href = "https://github.com/ReactTraining/history/blob/v3/docs/Location.md" rel = "nofollow noreferrer"> github.com/ReactTraining/history/blob/v3/docs/Location.md

@abelito Je vois, donc c'est juste la façon Redux d'appeler this.props.history.push (...)

@Titus Je ne suis pas sûr, mais il vient de react-router-redux

pouvez utiliser push ({pathname: '/', search: '', hash: '# / hompage'})

pouvez-vous essayer d'utiliser history.push (/ homepage) ? avec l'historique provenant des accessoires de route reacttraining.com/react-router/web / api / Route / route-props

@NeelPatel non, le paramètre de requête résiste à toutes les tentatives d'élimination

Vous ne devez pas utiliser react-router-redux. Il n'est pas maintenu. Sa dernière mise à jour remonte à un an. Vous devez utiliser le routeur connecté-react. Je n'ai aucun problème avec cela.

@ OlivierBoissé, non, même utiliser directement l'historique ne fonctionne pas. Et de toute façon, cela briserait probablement le redux.

4 Réponses :

0
votes

Essayez celle-ci (méthode hardcode)

history.location.pathname =`${window.location.origin}/homepage`;

Ou celle-ci

import { push } from 'react-router-redux'

...
const url = `${window.location.origin}/homepage`;
dispatch(push(url));

Ces méthodes ne sont pas du tout une bonne pratique mais celles travail (le deuxième bien sûr)

1 commentaires

La première version ne fonctionne pas (les paramètres de requête restent dans l'URL). Le second semble forcer un rechargement de page, ce qui n'est pas ce dont j'ai besoin: le paramètre de requête est évalué à partir de l'url et stocké dans l'état de l'application, et le rechargement de la page me fait perdre les informations. Pour être clair: je souhaite modifier l'URL sans forcer le rechargement d'une page. J'ajouterai cela à la question.

0
votes

D'après les liens suivants, j'ai cloné ceci et exécuté npm install dans le répertoire principal et l'exemple de répertoire de base, et j'ai exécuté npm start pour obtenir un exemple fonctionnel.

https://github.com/reactjs/react-router-redux

https://github.com/reactjs/react-router-redux/tree/master/ examples / basic

https://github.com/reactjs/react-router-redux#pushlocation-replacelocation-gonumber-goback-goforward

Code pour supprimer les paramètres de requête (près du bas) et valider leur suppression:

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer, routerMiddleware, push } from 'react-router-redux'
import * as reducers from './reducers'

const reducer = combineReducers({
  ...reducers,
  routing: routerReducer
})

const middleware = routerMiddleware(browserHistory)

const store = createStore(
  reducer,
  applyMiddleware(middleware)
)
const history = syncHistoryWithStore(browserHistory, store)

// Dispatch from anywhere like normal.
store.dispatch(push("/?test=ok"));
// store2.dispatch(push(history.createHref("/")));
var count = 0;

history.listen(location => {
    console.log(location);
    if (count > 1) { return; }
    count++;
    store.dispatch(push({ pathname:'/', search: '' })); // Drops the params
});

Vérifiez la console et vous verrez que le champ des paramètres de requête (recherche) est vide

1 commentaires

Ne travaille pas pour moi. L'URL interne utilisée par react peut changer correctement, mais l'URL dans la barre du navigateur reste inchangée.

0
votes

Voir la section mon routeur

 handleSubmit = () => {
      this.props.history.push('./VehicleList');

    }

Il y a le prochain bouton dans la page BookerInitial

<button className="submit btn-skew-r btn-effect" id="nextBtn" style={{ backgroundColor: "#da1c36" }} onClick={this.handleSubmit}  >Next</button>

Méthode du bouton Soumettre

 <div>
                <MainHeader />
                <Switch>
                    <Route exact path='/:pickupLocationName/:pickupDate/:pickupTime/:returnDate/:returnTime' render={(props) => <Quote  {...props} />} />
                    <Route path='/BookerInitial/:user/:id' component={BookerInitial} />
                    <Route path='/VehicleList' component={VehicleList} />
                    <Route path='/AdditionalCoverages' component={AdditionalCoverages} />
                    <Route path='/BookingDetails' component={BookingDetails} />
                    <Route path='/RenterInfo' component={RenterInfo} />
                </Switch>
                <Footer/>
            </div>

J'ai également fait face à ce problème. enfin j'ai trouvé la solution J'ai changé comme this.props.history.push ('/ VehicleList'); from this.props.history.push ('./ VehicleList'); ci-dessus, vous pouvez voir le point (.) est le problème avec mon code. donc pas besoin de supprimer le paramètre dans l'URL par code. merci

0 commentaires

1
votes

Avec l'expression régulière, cette solution est peut-être plus simple pour vous:

  var oldURL = 'http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860'
  var newURL = /(http(s?).+)(\?.+)/.exec(oldDomain)[1] + 'homepage'

Vous pouvez utiliser newURL dans votre projet.

0 commentaires