React router with browserHistory goes to server on every URL change

Question

I am doing something like:

<Router history={browserHistory}>{routes}</Router>

When I do above whenever URL in address bar changes call is going to server but this is not what I want, I want first time page to load from server but after that whenever route change component should load in client side only. Am I missing something here?

In client side I am doing something like :

ReactDOM.render(
    <Provider store={app.store}>
        <Router history={browserHistory}>{routes}</Router>
    </Provider>,
    document.getElementById("app")
);

and my routes look like:

const routes = (
    <Route path="/" component={DJSAppContainer}>
        <Route path="page" component={DJSPage}>
            <Route path="/page/:pageName" component={PageContainer} />
        </Route>
    </Route>
);

Now whenever I do location.href = "/page/xyz" it goes to server and load the content.

Answer 1

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.