Remove hash from React Router when using

Question

I use the following code to change my React Router path:

import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { Router, Route, browserHistory, IndexRoute } from 'react-router'


var currentRouteName = this.props.location.pathname;
const path = currentRouteName + '/yes';
browserHistory.push(path);

The router looks like this:

ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/review/request/:id">
            <IndexRoute component={QuestionBox}/>
            <Route path="yes" component={PositiveBox}/>
            <Route path="no" component={NegativeBox}/>
            <Route path="thank-you" component={ThankYouComponent}/>
        </Route>
    </Router>
), document.getElementById('parent-div'))

When I change the path with the above code I get a hashmark # in my URL, i.e. http://localhost:8080/review/request/5066549580791808/yes#

When I click back in the browser the hash will disappear and give me the path: http://localhost:8080/review/request/5066549580791808/yes

But the view won't update, if I hit back again, it will go back to the root path of:

http://localhost:8080/review/request/5066549580791808

And the view will change the IndexRoute again. What I think and what I want to have happen is to only have to hit the back button one time.

Can someone tell me what I am doing wrong? Thanks!

Shaun · Accepted Answer · 2016-10-10 18:42:41Z

1

Okay I found the answer and it's a tad bit annoying, in my click handler for my QuestionBox object it was like this:

click_like_button() {
        console.log("Like button clicked:", this); // React Component instance
        this.setState({should_hide: true});
        var currentRouteName = this.props.location.pathname;
        const path = currentRouteName + '/yes';
        browserHistory.push(path);
    }

Notice anything missing? I'm not passing in the actual event being generated by the click, so I changed it to this:

click_like_button(event) {
        event.preventDefault();
        console.log("Like button clicked:", this); // React Component instance
        this.setState({should_hide: true});
        var currentRouteName = this.props.location.pathname;
        const path = currentRouteName + '/yes';
        browserHistory.push(path);
    }

Now I have the event being passed in and then I do an event.preventDefault(); and ta-da it works! Why I had to do that I'm not sure, greater minds can no doubt tell you, but I think that gotcha is a little annoying and should either be fixed or warned on react-router.

answered Oct 10, 2016 at 18:42

Shaun

1,6212 gold badges19 silver badges36 bronze badges

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

2 Comments

Fabian Schultz Over a year ago

Is the click_like_button method triggered by clicking on an anchor with an href='#' attribute? That might be why it added the hash to the URL. event.preventDefault(); is a common way to prevent that from happening.

Gregg Over a year ago

I agree with @FabianSchultz that you probably just have the # in an href causing that and without the preventDefault(), the default is to use the #.

Collectives™ on Stack Overflow

Remove hash from React Router when using

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related