Вложенные маршруты в Next js - PullRequest
Новая
       12

Вложенные маршруты в Next js

0 голосов
/ 31 августа 2018

У меня есть простой SPA, а компоненты App и About, как показано ниже. Когда я нажимаю на ссылку «О программе», под ссылками появляется страница «О программе». Проблема в том, что когда я нажимаю ссылку «О себе», загружается страница «Я», а не страница «О себе». Что я действительно хочу, так это иметь вложенную маршрутизацию в nextjs. Кажется, что маршруты первого уровня загружаются в. Но я не знаю, как добавить его в мои подкомпоненты. 

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

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Я наконец нашел решение этой проблемы. Я изменил свой код в соответствии с этой проблемой, которая предлагает использовать layout-компоненты: 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>
  )

Это предотвращает перезагрузку страницы. Тем не менее, он по-прежнему перерисовывает всю страницу.

0 голосов
/ 02 сентября 2018

Следующий маршруты

есть очень хорошая библиотека для этих конкретных ситуаций, которая позволяет вам определять маршруты так же, как известные 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
...