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