Any examples with animations? about next-routes

[fridays]

I didn't try this yet but here is some information that might be helpful: vercel/next.js#88

[AmrN]

Hey @fridays,
in order to prevent the top-level component from unmounting on route change, I'm thinking about using a single page pages/index.js which is responsible for choosing which component to render.
But I don't know how to use this method with next-routes because I need a way to tell the index.js page which component it should render via the routes definition, maybe something like explicit params.

// routes.js
routes.add('blog', '/blog', 'index', {component: "BlogList"})
routes.add('blog-post', '/blog/:slug', 'index', {component: "BlogPost"})

// pages/index.js
switch (this.props.url.query.component) {
  case 'BlogList':
    // render BlogList
  case 'BlogPost': 
    // render BlogPost
}

So is there anyway I can specify explicit query params like {component: "BlogList"} in the example above, or would you suggest a better way for approaching this problem? Thanks.

[fridays]

Hi @AmrN you can do something like this:

// pages/index.js
import React from 'react'
import routes from '../routes'

const components = {
  blog: props => <div>Blog</div>,
  blogPost: props => <div>Blog Post</div>
}

export default class extends React.Component {
  static async getInitialProps ({asPath}) {
    return routes.match(asPath)
  }

  render () {
    const {route, params, ...props} = this.props

    if (route) {
      const Component = components[route.name]
      Object.assign(props.url.query, params)
      return <Component {...props} />
    }

    return <div>Not found</div>
  }
}

The downsides with this method are no automatic code splitting and you need some custom error handling.