web-dev-qa-db-fra.com

Itinéraires imbriqués dans Next js

J'ai un SPA simple et les composants App et About sont comme ci-dessous. Lorsque je clique sur le lien À propos, la page À propos apparaît sous les liens. Le problème est que lorsque je clique sur le lien "À propos de moi", la page "moi" se charge au lieu de la page environ. Ce que je veux vraiment, c'est avoir un routage imbriqué dans nextjs. Il semble que des itinéraires de premier niveau se chargent. Mais je ne sais pas comment l'ajouter à mes sous-composants.

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
reactjsserver-side-renderingnext.js
5
Hadi Ranjbar

J'ai finalement trouvé une solution à ce problème. J'ai changé mon code en fonction de ce problème qui suggère d'utiliser des composants de disposition: 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

Alors ce que je vais montrer comme un enfant devrait être comme ceci:

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

Cela empêche le rechargement de la page. Cependant, il restitue encore la page entière.

1
Hadi Ranjbar

prochaines routes

il existe une très bonne bibliothèque pour ces situations spécifiques qui vous permet de définir des itinéraires comme _ express.js itinéraires.

tilisez-le.

exemple de documents:

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
1
Soorena