React-router: Navigating to react router correctly?

[rukshn]

I want to navigate to a react route after making a post request using the data returned from the post request. What's the correct way to do it using the latest react router?

import {Router} from react-router 

.....
.....

fetch(post_request).then(function(response){
    return response.json()
}).then(function(response){
    this.props.router.push('/new/information/' + response)
})

However this gives me an error saying router is not defined. How can I correctly navigate in react router in this situation? Thanks

[alisd23]

Can you give more details please? Are you doing this request in a component rendered by Match?

[rukshn]

@alisd23 Hi, I corrected the code like this, now it is working and navigating to the route. However the browser URL is not changing.

What I want is after the post request navigate to the route with the response of the request being the query string.

import browserHistory from 'react-router'

var state = this
fetch(post_request).then(function(response){
    return response.json()
}).then(function(response){
    var url = '/new/medical/' + response.user
    state.context.router.push({pathname: 'new/information/' + response.user})
})

[alisd23]

Is the fetch inside a component here? I'm a bit confused what state is.

If you're in a component you'll want to grab history from the context, and use:

history.push('some-url')

[rukshn]

@alisd23 the code looks like this, sorry the state is just a variable to make sure the this.context works inside the fetch function, if not it won't work causing context to be undefined.

import React from 'react'
import {Router} from react-router 

class Usercomponent extends React.Component {
  constructor(context){
    super(context)
  }

add_user(e){
//gather form data
var state = this
fetch(post_request).then(function(response){
    return response.json()
}).then(function(response){
    state.context.router.push({pathname: 'new/information/' + response.user})
})

render() {
    return (
        //html form
    )}

Usercomponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

[alisd23]

Ah ok that's better.

if you use the withRouter higher order component you can access all the history methods via props. Then you can avoiding touching context at all.

So you could change it something like this:

import { withRouter } from 'react-router';

class Usercomponent extends React.Component {
  add_user() {
    const { router } = this.props;
    fetch(post_request)
      .then(response => response.json())
      .then(response => router.push('new/information/' + response.user))
  }

  // ...
}

const WrappedUsercomponent = withRouter(Usercomponent);

[rukshn]

@alisd23 so what's the reason router.push is not changing the URL?

[alisd23]

Well I don't know without seeing all the code really. If the code isn't even changing the browser url, check you're even getting to the router.push, and that the pathname is valid. That code should _definitely_ work

[rukshn]

@alisd23 yes the view is changing and the parameters are passing response.user but just the URL is not changing. Is it something to do with how the routers are defined?

  <Router history={browserHistory}>
    <Route path="/" component={Home}>
      <Route path="new/user" component={NewUser}></Route>
      <Route path="new/info/:pid" component={NewUserInfo}></Route>
    </Route>
  </Router>

There is a similar unanswered question on stackoverflow? http://stackoverflow.com/questions/36187134/react-router-2-0-programmatically-change-route-url-not-updated

[alisd23]

@rukshn that code looks fine to me.

Is your app in an iframe? For example this might be the case if you're using webpack-dev-server.

[ryanflorence]

maybe there's an error in the console preventing push from ever actually being called, but this is a well tested code path (nothing would work if router.push didn't work) so I'm going to close this unless we discover something wrong in the router code. thanks :)

[rukshn]

@alisd23 gosh can't believe I didn't notice that, yes I was using it on webpack-dev-server . Thanks it solves the problem

[alisd23]

@ rukshn No problem 👍