Далее. js рендеринг динамического c контента через пути - PullRequest
Новая
       47

Далее. js рендеринг динамического c контента через пути

0 голосов
/ 06 апреля 2020

Хочу достичь

У меня есть две ссылки, которые имеют динамические c пути. Когда я нажимаю на любой из них, я хочу, чтобы мои локальные данные отображались динамически в зависимости от того, какая ссылка нажата.

Issue

При нажатии на любую из двух ссылок я перехожу на страницу 404. Я на 100% уверен, что мои настройки неверны, и я нахожусь в правильном направлении, но не могу понять, как реализовать мои динамические c пути для рендеринга со связанными данными.

Мой код

  • Мои данные - это json файл, который находится в root моего проекта в папке data/posts.json
[
   {
    "title": "Array",
    "description": "Arrays are ......"
  },

  {
    "title": "Objects",
    "description": "Objects are......"
  }
]
  • Мои пути к страницам находятся в pages/posts/[id].js
import fs from 'fs'
import path from 'path'

import Layout from '../../layout/layout'

const Post = ({data}) => {
  console.log(data);

  return (
    <Layout>
      <h1>{data.title}</h1>
      <p>{data.description}</p>


      <style jsx>{`
        h1, p {
          text-align: center;
        }  
      `}</style>
    </Layout>
  )
}


export async function getStaticProps() {
  // Read file directory
  const postsDirectory = path.join(process.cwd(), 'data')
  const filenames = fs.readdirSync(postsDirectory)

  // Read and parse JSON file
  const fileData = filenames.map(filename => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = JSON.parse(fs.readFileSync(filePath, 'utf8'))

    return {
      filename,
      content: fileContents,
    }
  })

  const data = fileData[0].content

  return {
    props: {
      data: data[query.id]
    },
  }
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: 'arrays' } },
      { params: { id: 'objects' } }
    ],
    fallback: false
  };
}


export default Post
  • Мой основной индекс. js файл, который сидит в pages/index.js
import fs from 'fs'
import path from 'path'

import Layout from '../layout/layout'
import Head from 'next/head'
import Banner from '../components/banner'
import CardContainer from './../components/card';

const Home = ({data}) => {
  console.log(data);

  const titleData = data.map(item => item.title)

  return (
    <Layout>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Banner />
      <CardContainer titleData={titleData}/>
    </Layout>
  )
}

export async function getStaticProps() {
  // Read file directory
  const postsDirectory = path.join(process.cwd(), 'data')
  const filenames = fs.readdirSync(postsDirectory)

  // Read and parse JSON file
  const fileData = filenames.map(filename => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = JSON.parse(fs.readFileSync(filePath, 'utf8'))

    return {
      filename,
      content: fileContents,
    }
  })

  const data = fileData[0].content

  return {
    props: {
      data
    },
  }
}

export default Home

Мой CardContainer компонент, где находится ссылка на каждую страницу: 

<Link href='/posts/[id]' as={`/posts/${title}`}>
    <img src={img} alt="card image" />
</Link>

title prop это заголовок из моих json данных, который соответствует пути страницы следующим образом:

http://localhost:3000/posts/arrays

http://localhost:3000/posts/objects

Исследование, которое я провел

Я проверил следующие примеры, но не смог выяснить это, поскольку мои данные локальные, а не из API.

следующий. js страницы

выборка данных для страниц

блог уценки с Next. js

...