Link not working with server side rendering

[walidargh]

I am having trouble getting a link tag to work when using server-side rendering with react router

I essentially copied the router code from the example https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ServerRouterApp.jsx:

My Routes:

export default (
  <Route path="react_router" component={RouterLayout}>
    <Route path="first_page" component={RouterFirstPage} />
    <Route path="second_page" component={RouterSecondPage} />
  </Route>
);

import React from 'react';
import { match, RouterContext } from 'react-router';
import routes from '../routes/routes';

export default (props, railsContext) => {
  let error;
  let redirectLocation;
  let routeProps;
  const { location } = railsContext;

  match({ routes, location }, (_error, _redirectLocation, _routeProps) => {
    error = _error;
    redirectLocation = _redirectLocation;
    routeProps = _routeProps
  });

  if (error || redirectLocation) {
    return { error, redirectLocation };
  }

  return (
      <RouterContext {...routeProps} />
  );
};

And in my rails view I am rendering the ServerApp:

<%=react_component("ServerRouter", props: {posts: @posts}, prerender: true) %>

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

export default class Tile extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  static contextTypes = {
    router: PropTypes.object,
  }

  render() {
    return (
        <div className="tile-con">
          <Link to="listings/5">Hello</Link>
          <h2>{this.props.post.title}</h2>
          <p>{this.props.post.body}</p>
        </div>
    );
  }
}

I can get this working fine by using my Client Router and setting prerender to false:

export default (props, context) => (
  <Router history={browserHistory}  {...props}>
    <Route path="react" component={GridLayout}>
      <Route path="listings" component={Grid} />
      <Route path="listings/:listingId" component={ListingDetails} />
    </Route>
  </Router>
);

Not sure what I am doing wrong. Any help is appreciated!

[justin808]

@walidargh are you using turbolinks? You probably don't want to use it with react-router. See #573

[walidargh]

@justin808 Thanks for the quick response, I am not currently using turbolinks.

[justin808]

You'll have to do some debugging.

Here's a good example: https://github.com/shakacode/react-webpack-rails-tutorial/blob/8a6c8aa2e3b7ae5b08b0a9744fb3a63a2fe0f002/client/app/bundles/comments/startup/ClientRouterApp.jsx

[justin808]

@walidargh any update? Can we close this issue?

[justin808]

@walidargh I'd like to get this issue closed if possible.