Client-side routing

[petehunt]

Would be cool if there was a React router that was in npm installable and was set up out-of-the-box by the generator

[newtriks]

I +1 this big time! I have been putting out the feelers to what the community use and the general consensus I feel is whatever suits.

As an example from the MeteorJS community, Iron Router is freaking ace! It's key-concepts are worth looking at and I think a react specific router using this as a reference would be a great library for development.

[petehunt]

The reason we haven't come up with a great one is because we would want it to work on both server and client transparently. But that makes the problem a lot more complicated and we can incrementally get there by starting on client-only first.

One example is what we do in todomvc: https://github.com/tastejs/todomvc/blob/gh-pages/labs/architecture-examples/react/js/app.jsx#L31. But if Iron Router is better we can use that.

[newtriks]

Iron Router is specific to MeteorJS as far as I am aware, dunno how easy it would be to port though....

A very quick nose around the source and it appears the core of Iron Router could be re-used e.g. router.js. The client and server specific elements seem to hold the majority of MeteorJS logic...

[ryanseddon]

react-router seems to hit the nail on the head with all the requirements http://andreypopp.viewdocs.io/react-router-component

[newtriks]

@ryanseddon I agree and I will try and set aside some time to integrate into this generator as an optional include (unless someone else beats me to it 🐎 )

[marr]

How does the routing work currently? I see paths that the browser interprets as "script/components" which sets relative paths to ../../styles/ so its seemingly 1:1 from the filesystem.

[newtriks]

Done :) @petehunt etc

[RobErskine]

Sorry to comment on such an old issue, but is this react-router still part of this generator? I'm not seeing in in the generator command prompts, and I don't see it documented (it's addition on removal) in the changelog.

[weblogixx]

Hi @RobErskine,

the generator does not have support for flux or react-router anymore. This was done in version 2.0, because we wanted it to be easier to maintain (see https://github.com/newtriks/generator-react-webpack#changes-in-version-20). For flux frameworks, there are currently at least 2 other generators using generator-react-webpack as base (reflux and alt.js). Both are linked to in the README.

Installing react-router is easy as:

npm install --save react-router

// Update run.js:
import { Router } from 'react-router';
import history from '../utils/History.js';

ReactDOM.render(
  <Router history={history}>
    // YOUR ROUTES HERE
  </Router>,
  document.getElementById('app')
);

// Create src/utils/History.js
import { createHistory } from 'history';
export default createHistory();

// Update the main component:
require('reset.css');
require('styles/App.less');

import React from 'react';

class AppComponent extends React.Component {
  render() {
    return (
      <div className="layout">
        {this.props.children}
      </div>
    );
  }
}

export default AppComponent;

Hope this helps.

[RobErskine]

Thanks @weblogixx, that's great. I didn't realize react-router was part of the flux strip out overhaul done in 2.0.