web-dev-qa-db-ja.com

クエリパラメータをURLから削除します

次のURLがあります。

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

そして私はにリダイレクトしたい：

_http://my.site#/homepage
_

私はそれをしています：

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

...

dispatch(Push('/homepage'))
_

しかしReactは私を次のように取ります：

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

アプリケーションをリロードせずにブラウザのアドレスバーでクエリパラメータをドロップするようにReactをどのように指示することができます？

javascriptreactjsreact-routerquery-parameters
9
blueFast

正規表現では、この解決策はあなたにとってより簡単です。

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

あなたのプロジェクトでnewurlを使うことができます。

1
uyghurbeg

私のルーターセクションを参照してください

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

Bookerinitialページに次のブタンがあります

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

送信ボタン方式

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

    }
 _

私もこの問題に直面しました。最後に、私は私がthis.props.history.push（ '/ vehiclelist'）として変更された解決策を見つけました。 this.props.history.push（ './ vehiclelist'）。上記の場合は、ドット（。）が私のコードに関する問題です。そのため、コードごとにURLでパラメータを削除する必要はありません。ありがとうございました

0
Nava Ruban

これを試してみてください（ハードコードウェイ）

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

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

またはこれ

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

これらの方法は、それらの作業はまったく慣習ではありません（確かに2番目のもの）

もっと読む

0
Artem Solovev

次のリンクごとに、私はこれをクローニングし、メインディレクトリと例の基本ディレクトリの両方でNPMインストールを実行し、ran NPMは実行の例を取得します。

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

クエリパラメータを削除するためのコード（下部に近い）で、削除されたことを検証します。

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
});
 _

コンソールをチェックして、クエリパラメータ（検索）フィールドが空の

0
abelito