Use react-router about react-starter-kit HOT 36 CLOSED

what is the status of implementing react-router?

from react-starter-kit.

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

from react-starter-kit.

@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.

from react-starter-kit.

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.

from react-starter-kit.

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

from react-starter-kit.

+1 to react-router

from react-starter-kit.

+1 to react-router as well

from react-starter-kit.

+1 to react-router

from react-starter-kit.

+1 to react-router

from react-starter-kit.

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

+1 to react-router

from react-starter-kit.

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.

from react-starter-kit.

+1

from react-starter-kit.

+1

from react-starter-kit.

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.

from react-starter-kit.

• 1 for seeing a fork with react-router implemented

from react-starter-kit.

+1

from react-starter-kit.

+1

from react-starter-kit.

+1 to react-router

from react-starter-kit.

+1 for react-router

from react-starter-kit.

+1 for react-router

from react-starter-kit.

+1

from react-starter-kit.

Yeah I'd really like to see an example

from react-starter-kit.

+1

from react-starter-kit.

+1 for react-router

from react-starter-kit.

+1 to react router please

from react-starter-kit.

+1

from react-starter-kit.

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

from react-starter-kit.

After ff5016f, 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

from react-starter-kit.

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

from react-starter-kit.

@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.

from react-starter-kit.

👍

from react-starter-kit.

+1 for a forked example with react-router!

from react-starter-kit.

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

from react-starter-kit.

@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.

from react-starter-kit.

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.

from react-starter-kit.

@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 :-)

from react-starter-kit.