私はシンプルなSPAを持っています。AppとAboutコンポーネントは以下のようなものです。 [About]リンクをクリックすると、リンクの下に[About]ページが表示されます。問題は、「About me」リンクをクリックすると、aboutページではなく「me」ページがロードされることです。私が本当に欲しいのは、nextjsでネストされたルーティングを持つことです。で第1レベルのルートが読み込まれているようです。しかし、サブコンポーネントに追加する方法がわかりません。
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
私はついにこの問題の解決策を見つけました。 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
それから私が子供として見せようとしているものは次のようになります:
const me = () => (
<About>
<div>
About me
</div>
</About>
)
これにより、ページのリロードが防止されます。ただし、それでもページ全体が再レンダリングされます。
この特定の状況には、よく知られているexpress.js
ルート。
ドキュメントの例:
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