9

I have the following URL:

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

And I want to redirect to:

http://my.site#/homepage

I do that with:

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

...

dispatch(push('/homepage'))

But react takes me to:

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

How can I tell React to drop the query param in the browser's address bar without reloading the application?

9
  • What is push(...) ? Commented May 27, 2019 at 11:26
  • @Titus decembersoft.com/posts/… github.com/reactjs/… github.com/ReactTraining/history/blob/v3/docs/Location.md Commented May 27, 2019 at 11:27
  • @abelito I see, so it is just the Redux way of calling this.props.history.push(...) Commented May 27, 2019 at 11:30
  • @Titus I am not sure, but it is coming from react-router-redux Commented May 27, 2019 at 11:34
  • 1
    can please use push({ pathname:'/', search: '', hash:'#/hompage' }) Commented May 27, 2019 at 11:42

4 Answers 4

1

With Regular Expression maybe this solution is easier for you:

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

You can use newURL in your project.

Sign up to request clarification or add additional context in comments.

Comments

0

Try this one (hardcode way)

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

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

Or this one

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

Those methods are not a good practice at all but those work (the second one for sure)

Read more

1 Comment

The first version does not work (query params remain in the URL). The second seems to force a page reload, which is not what I need: the query param is evaluated from the url and stored in the app state, and reloading the page makes me lose the information. To be clear: I want to change the url without forcing a page reload. I will add that to the question.
0

Per the following links, I git cloned this and ran npm install in both the main directory and the example basic directory, and ran npm start to get a working example.

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 to remove query params (close to the bottom) and validate that they're removed:

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

Check console and you'll see the query params (search) field is empty

1 Comment

Not working for me. The internal URL used by react might be changing alright, but the URL on the browser bar remains unchanged.
0

See my router section

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

There is next buton in BookerInitial page

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

Submit button method

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

    }

I also faced this problem. finally i found the solution i changed as this.props.history.push('/VehicleList'); from this.props.history.push('./VehicleList'); above you can see the dot(.) is the issue with my code. so no need to remove parameter in URL by code. thank you

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.