React Router server side rendering Rails

Question

I have been struggling to find a good way of accomplishing this, but essentially what I want to do is render a page via the server, but have subsequent routing be client side via react-router. I am able to have a server side router by using createMemoryHistory for my router.

class Router extends React.Component {
  render() {
    return(
      <Router history={createMemoryHistory}>
        <Route path="/" component={App}>
          <IndexRoute component={Index} />
          <Route path="/contact" component={Contact}/>
          <Route path="/about" component={About}/>
        </Route>
      </Router>
    )
  }
}

Then via the react-rails gem I am able to render the content on the server.

<%= react_component('Router', {}, {prerender: true}) %>

The issue with this is that the URL's don't change when I navigate to different pages. So ideally I'd want to be able to load the router on the server using createMemoryHistory, then once it is loaded I'd want to switch to browserHistory.

casr · Accepted Answer · 2016-10-25 04:24:07Z

2

You might be able to accomplish this by setting your history prop earlier based on the environment. I am not familiar with the react_component on Rails but I am guessing that MountUp is your root component.

const history = process.env.NODE_ENV === 'server' ? createMemoryHistory : browserHistory;

// ...

class MountUp extends React.Component {
  render() {
    return (
      <Router history={history}/>
    );
  }
}

// ...

class Routes extends React.Component {
  render() {
    return(
      <Router history={this.props.history}>
        <Route path="/" component={App}>
          <IndexRoute component={Index} />
          <Route path="/contact" component={Contact}/>
          <Route path="/about" component={About}/>
        </Route>
      </Router>
    )
  }
}

answered Oct 25, 2016 at 4:24

casr

1,2562 gold badges13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router server side rendering Rails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related