Получать данные, используя идентификатор из API, но отображать альтернативный текст для адресной строки, например, content_title в Next. js - PullRequest
Новая
       3

Получать данные, используя идентификатор из API, но отображать альтернативный текст для адресной строки, например, content_title в Next. js

3 голосов
/ 10 марта 2020

Я использую API, который позволяет получать данные только с использованием id НО title следующим образом http://0.0.0.0:5000/blog/13b03a39-bc04-4604-baf6-059658f9f5e8. Конечная точка возвращает объект JSON, который я хочу отобразить в браузере, используя Next Js. Однако я хочу иметь архитектуру чистого URL, которая содержит заголовок следующим образом :

clean

вместо URL, содержащего следующий идентификатор:

dirty

Вот как я передаю props Link: 

<Link
    href={`/post/${post.blog_title}`}
    as={`/post/${post.blog_title}`}>

    <a className='blog__card--link'>
        <h4 className='blog__card--title'>{post.blog_title}</h4>
    </a>
</Link>

и вот мой [id].js файл: 

import { getBlog } from '../../api/index';

const Article = ({ blog }) => {
    const router = useRouter();

    return (
        <div class='article'>
            <div class='article__main'>
                {/* {console.log(router)} */}
                <ArticleView />
            </div>
        </div>
    );
};

Article.getInitialProps = async (router) => {
    const res = await getBlog(`${router.query.id}`);
    const json = await res.json();
    console.log(json);

    return { blog: json };
};

export default Article;

Попытка получить доступ к ${router.query.id} в getInitialProps возвращает название, которое, как я понимаю, проходит через as prop in Link.

Можно ли получить чистую структуру URL, но также использовать id в getInitialProps? и как я могу добиться этого с помощью динамических c ссылок в Next. js?

Ответы [ 3 ]

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

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#context -объект 

 Article.getInitialProps = async function(context) => {
    const res = await getBlog(`${context.query.id}`);
    const json = await res.json();
    console.log(json);

    return { blog: json };
};
1 голос
/ 11 марта 2020

вам нужно импортировать Next / Router 

import { useRouter } from 'next/router'

изменить вашу функцию getInitialProps на 

Article.getInitialProps = async (router) => {
    //get id query parameter
    const res = await getBlog(`${router.query.id}`);
    const json = await res.json();
    console.log(json);

    return { blog: json };
};

это должно работать для вас

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

решение 1, однако, эта база на вашей конечной точке, я предлагаю изменить конечную точку, чтобы получать слаг, чтобы вы могли управлять своим слагом

решение 2 не лучшая практика, но вы можете получить чистый URL-адрес и получить данные по id Используя Redux

решение 3 с использованием следующих маршрутов с использованием следующих маршрутов и передачей идентификатора в качестве параметров 

<Link route='blog' params={{id: data.id}}>
<a>Hello world</a>
</Link>
...