web-dev-qa-db-fra.com

Supprimer la requête Param de l'URL

J'ai l'URL suivante:

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

Et je veux rediriger vers:

http://my.site#/homepage

Je fais ça avec:

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

...

dispatch(Push('/homepage'))

Mais réagir me prend à:

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

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

javascriptreactjsreact-routerquery-parameters
9
blueFast

Avec une expression régulière peut-être que cette solution est plus facile 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.

1
uyghurbeg

Voir ma section de routeur

 <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>

Il y a prochain buton dans la page de bookerinitie

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

Méthode de bouton d'envoi

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

    }

J'ai aussi confronté ce problème. Enfin j'ai trouvé la solution que j'ai changée comme ça.Props.history.Push ('/ véhiculelelist'); de cela.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. Je vous remercie

0
Nava Ruban

Essayez celui-ci (façon de crochets)

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

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

Ou celui-ci

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

Ces méthodes ne sont pas une bonne pratique du tout, mais elles fonctionnent (la seconde à coup sûr)

En savoir plus

0
Artem Solovev

Pour les liens suivants, j'ai cloné cela et l'installation de NPM a cloné dans le répertoire principal et l'exemple de répertoire de base, et Ran NPM commence à obtenir un exemple de travail.

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

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

https://github.com/reactjs/react-router-redux#pushLocation-replacélocation-gonumber-goback-goforward

Code pour supprimer les paramètres de la requête (près du bas) et valider qu'ils sont supprimés:

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 Params de requête (Recherche) est vide.

0
abelito