Множественные переменные Django в React

В настоящее время я занимаюсь проектом, включающим Django и React.

Постовая модель в django

models.py

class PublishedManager(models.Manager):
    def get_queryset(self):
        return super(PublishedManager,
                     self).get_queryset()\
            .filter(status='published')

class Post(models.Model):
    STATUS = (
        ('project', 'Project'),
        ('published', 'Published'),
    )
    title = models.CharField(max_length=250)
    slug = models.SlugField(
        max_length=250, unique_for_date='publish')
    author = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name='messages')
    body = models.TextField()
    publish = models.DateTimeField(default=timezone.now)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    status = models.CharField(max_length=15, choices=STATUS, default='projekt')

    objects = models.Manager()
    published = PublishedManager()

    class Meta:
        ordering = ('-publish',)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse("frontend.views.post_detail",
                       kwargs={'year': self.publish.year,
                               'month': self.publish.month,
                               'day': self.publish.day,
                               'slug': self.publish.slug})

views.py

def post_list(request):
    posts = Post.published.all()
    serializer = PostSerializer(posts, many=True)
    json_data = json.dumps(serializer.data)
    return render(request, 'frontend/index.html', {'posts': json_data})


def post_detail(request, year, month, day, post):
    post = get_object_or_404(Post, slug=post,
                             status='published',
                             publish__year=year,
                             publish__month=month,
                             publish__day=day)
    return render(request,
                  'frontend/index.html',
                  {'post': post})

Я хочу получить 'posts' из post_list и 'post' из post_detail в index.html, что является начальной точкой для React.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    [..]
    <script>
      const posts = {{ posts|safe }};
      const post = {{ post|safe }};
    </script>
    <link rel="stylesheet" href="{% static "css/style.css" %}" type="text/css">
  </head>
  <body>
      <div id="root"></div>
    <script src="{% static "frontend/main.js" %}"></script>

  </body>
</html>

Переменные прекрасно работают, когда в теге script только одна переменная; я имею в виду следующее:

  • в теге script есть только одна переменная: const posts = {{ posts|safe }},
  • Код в компоненте react выглядит как {post.title} внутри абзаца,
  • я ввожу localhost:3000/posts/,
  • все посты из базы данных отображаются правильно

Проблема в том, что когда я добавляю еще одну переменную в тег скрипта (const post = {{ post|safe }}), он перестает работать, потому что localhost:3000/posts/ больше не видит переменную post, которая пуста.

Кроме того, мне трудно найти решение, как передать get_absolute_url из model.py для работы в теге a в компонентах react.

Мой последний вопрос - как заставить это работать с несколькими переменными, я уже пробовал несколько раз, но ничего не получилось.

Вернуться на верх