react-router browserHistory.push doesn't navigate to new page

Question

I tried to follow the solutions in this question and in the react-router example but I'm still having trouble.

I'm using react-router version 2.4.1, React version 15.1.0, and webpack 1.13.1.

I have a router that is set up like this:

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';
import Component from './component';
import Merchant from './merchant';
import CreateMerchant from './create-merchant';
require('bootstrap/dist/css/bootstrap.css');
// /* globals document, window */
//
// const { pathname, search, hash } = window.location
// const location = `${pathname}${search}${hash}`

render((
    <Router history={browserHistory}>
        <Route path="/" component={Component}/>
        <Route path="/merchant" component={CreateMerchant}/>
        <Route path="/merchant/:merchantId" component={Merchant}/>
    </Router>
), document.getElementById("app"))

When I go to http://localhost:8080/ I see the component as expected:

import React from 'react';
import {Link, browserHistory} from 'react-router';

export default class Component extends React.Component {
    handleSubmit(event) {
        const merchantId = event.target.elements[1].value;

        console.log("Merchant id is " + merchantId);

        const path = `/#/merchant/${merchantId}`;

        browserHistory.push(path);
    }


    render() {
        return <div className="container">
            <h1>Welcome to VPager!</h1>
            <h2>Would you like to create a merchant?</h2>
            <div className="row">
                <div className="col-md-6">
                    <Link className="btn btn-primary" to="/merchant">Yes, create a merchant and start taking
                        customers.</Link>
                </div>
            </div>

            <h2>Or do you have an existing merchant?</h2>
            <form onSubmit={this.handleSubmit.bind(this)}>
                <div className="row">
                    <div className="col-md-3">
                        <button type="submit" className="btn btn-primary">I have an
                            existing merchant ID, and it is:</button>
                    </div>
                    <div className="col-md-2"><input id="merchantId" className="form-control" type="number" /></div>
                </div>
            </form>
        </div>
    }
}

When I click the second button, though, the URL in the address bar changes, but the new view is not rendered.

It seems that people had similar issues in the past, but those solutions aren't working either.

I also tried creating a higher order component and nesting the routes with a top-level component. In that case, however, I get the error that "The root route must render exactly one element."

How do I get the form to navigate to a new view?

Is the page refreshing? Are you just missing `event.preventDefault()` in your submit handling function? — azium, May 30 '16 at 18:50
There's no page refresh and no `event.preventDefault()`. Even with that call, it still does the same thing. — Brad, May 30 '16 at 18:52
Oh.. I just noticed you have a `#` in your `path`, but you're not using `hashHistory`. It should probably be `const path = ``/merchant/${merchantId}`` — azium, May 30 '16 at 18:53
Yeah, that was pretty dumb of me. If you post that as an answer I'll accept it. — Brad, May 30 '16 at 18:56

score 3 · Accepted Answer · answered May 30 '16 at 18:57

3

You have an errant # in your path variable, possibly left over from using hashHistory. Leave it out, should work:

const path = `/merchant/${merchantId}`

answered May 30 '16 at 18:57

azium

20,056
7
57
79

react-router browserHistory.push doesn't navigate to new page

1 Answers1