Nested routes in Next js

Question

I have a simple SPA and the App and About components are like below. When I click on About link, the about page appears under the links. The problem is that when I click on "About me" link, the "me" page loads instead of about page. What I really want is having nested routing in nextjs. It seems that first-level routes are loading in . But I don't know how to add it to my subcomponents.

import App, { Container } from 'next/app'
import React from 'react'
import Link from 'next/link'
class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }
  render() {
    const { Component, pageProps } = this.props
    return <Container>
      <ul>
        <li><Link href="/news">News</Link></li>

        <li><Link href="/about">About</Link></li>
      </ul>
      <Component{...this.props} />
    </Container>
  }
}
export default MyApp


import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
class About extends React.Component {
  render() {
    return (
      <div id="main">
        <li><Link href="/about/company">About company</Link></li>
        <li><Link href="/about/me">About me</Link></li>

      </div>

    )
  }
}
export default About

Are you using a custom server? do you still have the `useFileSystemPublicRoutes` option on? — kyle, Aug 30 '18 at 22:38
@kyle No. I created the project with create-next-app. I think useFileSystemPublicRoutes is on because I haven't made any change on the default configuration. — Hadi Ranjbar, Aug 31 '18 at 06:45

score 8 · Accepted Answer · answered Sep 20 '18 at 12:44

I finally found a solution to this problem. I changed my code according to this issue that suggests using of layout-components: https://github.com/zeit/next.js/issues/4166

class About extends React.Component {
  render() {
    return (
      <div id="main">
        <li><Link href="/about/company">About company</Link></li>
        <li><Link href="/about/me">About me</Link></li>
        {this.props.child}
      </div>

    )
  }
}
export default About

Then what I am going to show as a child should be like this:

const me = () => (
  <About>
    <div>
     About me
    </div>       
  </About>
  )

This prevents page reloading. However, it still rerenders the entire page.

**Update (2022):** Its `props.children` now – Muhammad Osama Jan 07 '22 at 19:36 — Muhammad Osama, Jan 07 '22 at 19:36

score 2 · Answer 2 · answered Sep 02 '18 at 14:48

2

next-routes

there is a very good library for this specific situations that lets you define routes just like well-known express.js routes.

use it.

example from docs:

const routes = require('next-routes')

                                                    // Name   Page      Pattern
module.exports = routes()                           // ----   ----      -----
.add('about')                                       // about  about     /about
.add('blog', '/blog/:slug')                         // blog   blog      /blog/:slug
.add('user', '/user/:id', 'profile')                // user   profile   /user/:id
.add('/:noname/:lang(en|es)/:wow+', 'complex')      // (none) complex   /:noname/:lang(en|es)/:wow+
.add({name: 'beta', pattern: '/v3', page: 'v3'})    // beta   v3        /v3

answered Sep 02 '18 at 14:48

Soorena

4,352
5
30
42

3

Yes. I have seen it. But my problem is that how to handle an SPA nested routing in which a component is going to load into another component without reloading. In react-router, we can handle this by another Switch in a nested component. – Hadi Ranjbar Sep 03 '18 at 08:05
I can't figure out the use case, could you provide some examples for this? – Soorena Sep 03 '18 at 08:21
1

The example is exactly what I have provided in the question. @Soorena – Hadi Ranjbar Sep 03 '18 at 09:42

Nested routes in Next js

2 Answers2

next-routes