Создание динамических страниц в реагировании - PullRequest
Новая
       28

Создание динамических страниц в реагировании

0 голосов
/ 30 октября 2019

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

Так что просточтобы дать некоторый контекст

App.js 

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';

// App imports
import Navigation from './components/shared/Navigation/Navigation';
import Footer from './components/shared/Footer';

import JournalsIndex from './components/Journals/index'
import Journal from './components/Journals/Journal'

class App extends Component {
  render() {
    return (
      <>
        <Navigation />

        <div className="flex-1">
          <Switch>
            <Route exact path="/journals" component={JournalsIndex} />
            <Route exact path="/journals/:title" component={Journal} />
          </Switch>
        </div>

        <Footer />
      </>
    );
  }
}

export default App;

Здесь у меня есть два маршрута: один идет на страницу моего журнала, где я отрисовываю сообщения, а другой - для каждого отдельного сообщения, используяимя как его URL.

На моей странице указателя журналов у меня есть это 

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class JournalIndex extends Component {
  state = {
    journal: []
  }

  componentDidMount() {
    fetch('/journal')
      .then(res => res.json())
      .then(journal => this.setState({ journal }))
      .catch(function(error) {
        console.log(error)
      })
  }

  render() {
    return (
      <>
        <div className="p-12 text-gray-800">
          <section className="text-center mb-12">
            <h1 className="text-3xl">Journal</h1>
            <p className="text-sm">Here you'll find my journals, writings about everything from watches, repairs to dealing</p>
          </section>

          <section className="container max-w-2xl m-auto">
            {this.state.journal.map(journal => (
              <article className="py-4" key={journal._id}>
                <Link className="text-2xl font-bold" to={`/journal/${journal.title}`}>{journal.title}</Link>

                <div className="text-sm mt-2 mb-4">
                  {new Intl.DateTimeFormat('en-GB', {
                    year: 'numeric',
                    month: 'long',
                    day: '2-digit'
                  }).format()}
                </div>
                <hr />
              </article>
            ))}
          </section>
        </div>
      </>
    )
  }
}

export default JournalIndex

Это успешно выводит все мои сообщения.

В моем компоненте страницы отдельного журнала, У меня есть это 

import React, { Component } from 'react'

class Journal extends Component {
  render() {
    return (
      <>
        <div className="p-12 text-gray-800">
          <section className="text-center mb-12">
            <h1 className="text-3xl">Journal</h1>
            <p className="text-sm">Here you'll find my journals, writings about everything from watches, repairs to dealing</p>
          </section>

          <section className="container max-w-2xl m-auto">
            <article className="py-4">
              <h1 className="text-2xl font-bold">{journal.title}</h1>
            </article>
          </section>
        </div>
      </>
    )
  }
}

export default Journal

В настоящее время это не работает (я тоже этого не ожидал), но я все еще сталкиваюсь с реакцией, поэтому я не уверен, что смогу пройтив данных на отдельной странице журнала с помощью реквизита или как правильно правильно настроить URL, чтобы журнал отображал правильные данные и идентификатор или заголовок журнала.

Так что любая помощь здесь была бы полезной.

...