React-starter-kit: Use react-router

[jakecraige]

How do you feel about using react-router instead of a custom basic routing approach? It seems to be getting super popular and the fact that it's build for react makes me like it a lot more anyways

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[koistya]

I personally lean towards Flux-based router. Yahoo guys are working in this direction and there is also react-crossroads. Defining routes with JSX/XML looks odd to me. React components already describe view hierarchy, no need to re-implement that at the routing level.

[winkler1]

+1. React-router is doing isomorphic, trying turning off JS for http://react-router-mega-demo.herokuapp.com/ :)

[mewben]

+1 to react-router

[WRidder]

+1 to react-router as well

[mofas]

+1 to react-router

[Tailzip]

+1 to react-router

[sdiaz]

Both are isomorphic, but I guess attaching to a formal react based router is a good choice

+1 to react-router

[radum]

I on the same page with @koistya we shouldn't JSXify everything now, just because we can.

[goatslacker]

Another +1 for react router. It seems like this is becoming the de-facto router to use with react and building isomorphic applications with it is quite trivial.

I actually have an example here that shows how you're able to build isomorphic applications using react-router and flux.

[majodev]

+1

[markopavlovic]

+1

[patrickng]

Has anyone successfully gotten this to work on their own project/fork? Would love to see the implementation details. I've only encountered errors trying to integrate it in.

[the4dpatrick]

• 1 for seeing a fork with react-router implemented

[timdoes]

+1

[latifs]

+1

[aleksichen]

+1 to react-router

[soulmachine]

+1 for react-router

[luqin]

+1 for react-router

[abachuk]

+1

[9mm]

Yeah I'd really like to see an example

[jaredpalmer]

+1

[KirillSuhodolov]

+1 for react-router

[andrei-sheina]

+1 to react router please

[MathieuCh]

+1

[arkeros]

+1 to react-router, it's the de facto standard router for react.

[koistya]

After ff5016fd2f52ae9d852d7ebf640ce108f05342b7, it might be easier to integrate React Router. The src/routes/index.js file contains the list of all appliaction routes, where each route has these properties:

• path - a string or regular expression, e.g. /posts/:id (see path-to-regexp, route tester)
• action - a route handler that accepts context as its first argument, it can return a Promise
• children - optional parameter with a list of child routes

For example:

{
  path: '/admin',
  action() { ... },
  children: [
    {
      path: '/',                // www.example.com/admin
      action() { ... }
    },
    {
      path: '/users',
      children: [
        {
           path: '/',           // www.example.com/admin/users
           action() { ... },
        },
        {
           path: '/:id',        // www.example.com/admin/users/123
           action() { ... },
        },
      ]
    }
  ]
}

An action method may look something like this:

{
  path: '/users/:username', // e.g. www.example.com/users/john
  async action({ path, render, params }) {
    console.log(`handling ${path} route...`);
    const resp = await fetch(`/api/users/${params.username}`);
    const data = await resp.json();
    if (!data) return undefined;
    return render(<UserProfile {...data} />);
  }
}

If action method returns undefined, the router will keep traversing the route tree until it finds the first route that matches the provided URL path string and returns anything other than undefined.

---

In order to make it work with React Router, (1) the action property must be replaced with either component or getComponent, (2) the children property must be renamed to childRoutes, (3) the path values shouldn't start with / and follow React Router convention, (4) the match method inside src/client.js and src/server.js should be replaced with React Router's match method.

---

Ref #613

[Stupidism]

How to handle with the context thing here?
react-router's match doesn't process context for us

[koistya]

@stupidisum you can set context in the top-level React component, for example, with React Router it would be: const routes = { path: '/', component: App, childRoutes: [/* all the other routes */] }, where the App component sets the required context vars (e.g. Flux/Redux/Relay store etc.).

BTW, the routing boilerplate is going to be removed from server.js and client.js. See PR #613.

[dhyegocalota]

👍

[kaitlynreese]

+1 for a forked example with react-router!

[langpavel]

@rkait can you point us to fork with react-router in new issue or better PR?

[kaitlynreese]

@langpavel I am trying to implement something similar to their previous PR in my own project that uses RSK. There are still a few issues, so if anyone else has implemented something more formal that would be very helpful as an example.

[koistya]

FYI, you can find _some_ of the issues with React Router v2-3 in the official docs:

https://github.com/ReactTraining/react-router/tree/v4

The next version of RR has a completely different API, check it out. Yet, there is no guarantee that RR v4 will not be rewritten into something different in a few months from now.

[langpavel]

@koistya it looks like they are teaches a lot.. RR4 is awesome I think but I didn't tested it. If asynchronous routes, code splitting and other things will work seamlessly after they become stable, RR will be best choice :-)

[koistya]

@langpavel it seems like RR4 doesn't work well with Relay, and there is not a word about async data loading and code-splitting in their docs yet.

[ryanbelke]

what is the status of implementing react-router?