React router with browserHistory goes to server on every URL change

You shouldn't change location.href directly. You should send the new path to React using:

ReactRouter.browserHistory.push(newPath);

If you have anchor tags, you should use the <Link> component mentioned in @ahutch's answer.


React router exposes as props the history used in the current views. See their docs for all the props that are injected here.

If you want to redirect from DJSAppContainer or any of the two children views DJSPage or PageContainer you could do it by accessing the history property:

const {history} = this.props;
history.pushState('/path/to/new/state');

If on the other hand you do some fancy stuff and want to redirect from outside the components, try this (taken from react router docs)

// somewhere like a redux/flux action file:
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

This two approaches assume you are trying to redirect based on some complex logic, not as a consequence of a click event. If you just want to handle click events, try using the <Link/> component of react-router.

It seems that the history property is now deprecated, and seems to be replaced by the router context property as seen in the implementation of the link component. Basically, if you really want your code to be future proof, you should ask for the contextType:

contextTypes: {
     router: object
},

And then use it from the context of the component:

this.context.router.push('/some/path')