How to Add a Route to RSK?

[richb-hanover]

I am having trouble adding a new page/route to RSK. I have started with the current head (310bb5d), and done these steps:

1. Duplicate the routes/contact folder, and rename it to 'grumble'.
2. Rename the file names to Grumble.css and Grumble.js
3. Edit Grumble.js: s/Contact/Grumble/g
4. Edit index.js: change path to '/grumble', and s/Contact/Grumble/g
5. Edit routes/index.js to import grumble from './grumble'; and to add grumble, to the end of the children list

npm run start opens the browser to the home page at localhost:3001
localhost:3001/contact gives the contact page
localhost:3001/grumble gives a blank page, instead of a copy of the Contact page.

What else do I need to do? Thanks.

[richb-hanover]

Update: The files look like this:

routes/index.js

...
import error from './error';
import grumble from './grumble';

export default {

  path: '/',

  children: [
    home,
    contact,
    login,
    register,
    content,
    error,
    grumble,
  ],
...

routes/grumble/index.js

import React from 'react';
import Grumble from './Grumble';

export default {

  path: '/grumble',

  action() {
    return <Grumble />;
  },

};

routes/grumble/Grumble.js

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Grumble.css';

const title = 'Grumble Us';

function Grumble(props, context) {
  context.setTitle(title);
  return (
    <div className={s.root}>
      <div className={s.container}>
        <h1>{title}</h1>
        <p>...</p>
      </div>
    </div>
  );
}

Grumble.contextTypes = { setTitle: PropTypes.func.isRequired };

export default withStyles(s)(Grumble);

[frenzzy]

content route handles all paths, so you need to put your route before it

children: [
  // put your routes here...
  content,
],

[richb-hanover]

Ahah. That did the trick! All my (own) routes must appear above "content", so routes.index.js is now:

...
import error from './error';
import grumble from './grumble';

export default {

  path: '/',

  children: [
    home,
    contact,
    login,
    register,
    grumble,   // add the new route *above* the 'content' and 'error' entries in the list
    content,   // these two must be last
    error,     // these two must be last
  ],
...

A new question: why is error listed below content? Thanks!

[drobertson123]

Appreciate the work.

We could really use the How To for routing to have some more content. For those of us who are relatively new, this is seriously confusing.

Is there any chance this could get shifted over to the Docs for general use?

[richb-hanover]

I issued a PR for a placeholder page to update the How to Implement Routing page:

a050029

[samping]

thanks riche-hanover! I put my route over the "content" And resolve the problem

[upq]

Im deploying my app to heroku
locally everything runs perfect
after deploy I get error complaining about this

   async action({ next, render, context }) {
    const component = await next();
    if (component === undefined) return component;
    return render(
      <App context={context}>{component}</App>
    );
  },

it says
component is not defined
refering to the one inside the JSX HTML tag.

My order is this

  children: [
    home,
    admin,
    contact,
    start,
    login,
    register,
    persona,
    forgot,
    reset,
    content,
    error,
  ],

Any clues or help is appreciated

[upq]

Should I open an issue for that @langpavel ?

[langpavel]

@upq Yes, it is different problem, isn't it?

[ulani]

@richb-hanover thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.