Нужна помощь для рендеринга дочерних маршрутов. Родительский маршрут работает нормально, но дочерние маршруты падают до 404 - PullRequest
Новая
       6

Нужна помощь для рендеринга дочерних маршрутов. Родительский маршрут работает нормально, но дочерние маршруты падают до 404

1 голос
/ 15 марта 2020

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

Проблема : Когда я добавляю другой маршрут /news с кучей сообщений в другом JSON, родительский маршрут /news работает нормально, но дочерние маршруты, такие как /news/1/ или /news/2/ все go до 404 страниц.

В консоли браузера я получил ошибку GET http://localhost:3000/__react-static__/routeInfo/news/1 404 (Not Found)

Я не думаю, что это динамические c маршруты, так как я могу получить данные до того, как приложение реакции будет смонтировано. Что я должен сделать, чтобы это исправить ?

В моем стати c .config. js

{
  path: '/news',
  getData: async () =>  ({
    messages,
  }),
  children: messages.map(message => ({
    path: `/news/${message.ID}`,
    template: 'src/containers/Message',
    getData: () => ({
      message,
    }),
  })),
}

и у меня есть сообщение. js в / src / контейнеры как 

import React from "react";
import { useRouteData } from "react-static";

export default () => {
  const { message } = useRouteData()

  return (
       <div>
          This is a {message.Title} page!
        </div>
    )
};

обработанные news.js как 

import React from 'react'
import { useRouteData } from 'react-static'
import { Link } from 'components/Router'

export default function Blog() {
  const { messages } = useRouteData()
  return (
    <div>
      <h1>It's news.</h1>
      <div>
        <a href="#bottom" id="top">
          Scroll to bottom!
        </a>
      </div>
      <br />
      All Posts:
      <ul>
        {messages.map(message => (
          <li key={message.ID}>
            <Link to={`/news/{message.ID}/`}>{message.Title}</Link>
          </li>
        ))}
      </ul>
      <a href="#top" id="bottom">
        Scroll to top!
      </a>
    </div>
  )
}

1 Ответ

0 голосов
/ 16 марта 2020

Пожалуйста, попробуйте это: 

const works = filterLanguage(JSON.parse(JSON.stringify(works)), lang)
...
{
   path: `/${lang}/works`,
   getProps: () => ({
      works,
   }),
   children: works.works.map(work => ({
       path: `/${work.slug}`,
       getProps: () => ({
           works,
           work: filterLanguage(Object.assign({}, {labels: works.labels}, work), lang),
       }),
   }))
},


const Work = getRouteProps(({ work }) => (
  <div>This is a work! {work}</div>
))

const Works = getRouteProps(({ works }) => (
  <div>
    <div>My works! {works}</div>
    <Route path="/works/:workID" component={Work} />
  </div>
))

Если вам нужно значение message.ID на странице сообщений. объект сообщения содержит поле идентификатора.

Я думаю, путь: /news/${message.ID} является динамическим c маршрутом. Может быть, вам нужно URL-адрес содержит идентификатор новости. Вы можете использовать это /news/show?id=${message.ID} в своем теге Link.

...