Layout pages

[Lucanis]

Nice work, this looks really promising.

I have a small question, is there a way to define a layout, to reuse a component on each page (e.g., a navigation component) ?

[StevenLangbroek]

It's React, so you don't need anything specific from after.js..., i.e.:

layout.js:

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

export default function Layout(props) {
  return (
    <div>
      <Navigation />
      <div className="main">
        {props.children}
      </div>
    </div>
  );
}

then in your page just do:

function MyPage(props) {
  return (
    <Layout>
      <h1>My page!</h1>
    </Layout>
  );
}

[jaredpalmer]

How would ppl feel about a top level Root component from which all routes inherit? Right now this is _app.js which is part of After. However, we could allow users to write their own.

[StevenLangbroek]

Could this also help with misc <Provider>s?

[jaredpalmer]

Yes. Unlike next.js, where you need to keep around a lot of HoC's to accomplish this (e.g. withData()), with this kind of setup you could wrap things on your own.

Route Config

// ./src/_routes.js

// ...imports

export default [{
   path: '/',
   component: Root, // providers could go here
   routes: [
       {
         path: '/',
         component: Home,
         exact: true
       },
       {
         path: '/about',
         ...
       }
   ]
}]

However, this wouldn't be perfect--imagine if you need to create a different router than BrowserRouter or you want to wrap your entire client app (including the router) in a provider. For example, this solution won't work with react-router-redux. https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

[jaredpalmer]

I wonder if it makes sense allow users to copy and paste _client.js. This was my initial idea. Seems much better than trying to find a "framework" solution.

[frol]

@jaredpalmer Should the demonstrated router config work? My small experiment ended up with only Root component, and anything that is in the nested routes just seems to be ignored.

[StevenLangbroek]

@frol did you remember to pass props.children through?

[frol]

Here is the props in the Root component:

(NOTE: no children)

import React from 'react'

export default class extends React.PureComponent {
  render() {
    console.log(this.props)
    return (
        <div>
            <h1>Head</h1>
            {this.props.children}
            <h1>Tail</h1>
        </div>
    )
  }
}

[pronevich]

I think "layout" components are uncovered issue in ssr land and after.js has the chance to change this in the "right" way:

1. Don't import same layout component on each page. Sometimes layout, not the page, defines route point. Then pages go under the layout. Something that @jaredpalmer proposed:

export default [{
   path: '/',
   component: Root, //  providers could go here and RootLayout if needed 
   routes: [
       {
         path: '/',
         component: Home, // will be under RootLayout
         exact: true
       },
       {
         path: '/user',
         component: UserLayout,
       },
       {
         path: '/user/login',
         component: LoginComponent // will be under UserLayout
       },
       ...
   ]
}]

2. Layout can be split point too. import('UserLayot')
3. On next route under the same layout, we loading only PageComponent, because of 1.

[felipeleusin]

Is there a reason for this issue been closed? Also got hit with this but couldn't find a fix in the source. We were thinking about how to fix it and the one that makes most sense specially considering the motto of "what if next.js and react-router had a baby" was to be able to use nested routing like react-router-config. Are you open to a PR using it?

Otherwise I can think of being able to send a Layout prop to render that gets injected into the After (afterparty) component and it defaults to Fragment. Then we can just include this component again in client.js

[alexparish]

@jaredpalmer What's the current advice on setting up a shared layout page?