Блог

Главная - Вопросы по программированию - Как открыть путь к динамической странице в nextjs?

Как открыть путь к динамической странице в nextjs?

#reactjs #next.js

Вопрос:

Я пытаюсь использовать динамический путь с помощью приложения nextjs.

Я разрабатываю систему CMS, и мои страницы проходят через nextjs.

В моем приложении администратора react пользователь может добавлять и создавать несколько страниц.
Существует приложение nextjs для конечных пользователей, которое позволяет пользователям получать эти динамические страницы.

Например: Администратор приложения добавил страницу об этом, и теперь пользователь может получить доступ к этой странице, введя следующее в браузере.

 http://localhost:3000/aboutus

Это должно сработать, но этого не происходит. Первое, что делает nextjs, выдает ошибку, когда мы пытаемся использовать useRouter hook и получить pathname (это показывает ошибку), и пытаемся найти aboutus.js компонент страницы, который физически не существует.

Во-вторых, нам нужен компонент react, что-то вроде App.js component того, чтобы мы могли идентифицировать динамическую страницу и вызывать нашу логику для отображения страницы, но в nextjs нет ничего подобного App.js component index.js компоненту nor. У Nextjs есть MyApp.js компонент, который является отправной точкой для запуска каждого компонента страницы с его свойствами, но я не могу написать здесь логику.

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

 http://localhost:3000/aboutus
http://localhost:3000/contact

Пожалуйста, посмотрите мой код ниже

 ========================================package.json==================================
{
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "bootstrap": "^5.0.2",
        "next": "11.0.1",
        "node-sass": "^4.14.1",
        "react": "17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-dom": "17.0.2",      
        "swr": "^1.0.0"
    },
    "devDependencies": {
        "eslint": "7.29.0",
        "eslint-config-next": "11.0.1"
    },
}

=================================================MyApp======================================

import "../styles/styles.css";
function MyApp({ Component, pageProps }) {
    return (
        <SharedProvider>
            <Component {...pageProps} />
        </SharedProvider>
    );
}
export default MyApp;




 ==========================================================index.js=======================

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import Head from "next/head";
import Layout from "../components/layout/layout";
function Home({ resData }) {
    const router = useRouter();
    const { permalink } = router.query;
    const [pageId, setPageId] = useState(0);

    useEffect(() => {
        onLoad();
    }, []);
    function onLoad() {

        let range = document.createRange();
        const wrapper = document.querySelector(".ic-container");
        wrapper.innerHTML = "";
        wrapper.appendChild(range.createContextualFragment(resData.PageContent));
    }

    return (
        <>
            <Head>
                <title>{resData.Title}</title>
                <meta property="og:description" name="description" content={resData.MetaDescription} key="description" />
                <meta property="og:keywords" name="keywords" content={resData.Keywords} key="keywords" />
                <meta property="og:title" name="title" content={resData.MetaTitle} key="title" />
                <meta property="og:author" name="author" content="test" key="author" />
                <link rel="stylesheet" href="/assets/minimalist-blocks/content.css" />
                <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" type="text/css" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
                <script
                    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
                    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
                    crossorigin="anonymous"
                ></script>

            </Head>
            <Layout>
                <div className="ic-container">
                    <div></div>
                </div>
            </Layout>
        </>
    );
}

export async function getServerSideProps(context) {
    const { perm } = context.query;
    let resData = "";
    try {    
        const fetchResponse = await fetch("http://localhost:3001/asa/page/pageByPer/"   perm);
        const data = await fetchResponse.json();
        const responseData = data amp;amp; data.page amp;amp; data.page.length > 0 ? data.page[0] : "";
        initialData = responseData;
        if (data) {
            if (data.isExist > 0) {
                lpageId = responseData.Id;
            }
        }
    } catch (e) {
        console.log(e);
    } finally {
    }
    return {
        props: {
        resData,
        },
    };
}

export default Home;

Как это лучше всего исправить ? спасибо вам за помощь

введите описание изображения здесь

Комментарии:

1. Как выглядит ваша структура файлов в разделе /pages ? Вы действительно определили динамическую страницу?

2. /pages/index.js , /pages/_app.js.

3. Если цель состоит в том, чтобы использовать динамический путь, первым шагом будет настройка динамического маршрута .

4. Привет, спасибо тебе, Джули. Вот некоторая путаница, которую я хочу понять. Я прочитал эту страницу. Будет ли работать динамический маршрут, когда пользователь n введет URL-адрес в браузере. Как и при вводе пользователем localhost:3000/dynamicpage, определения этой страницы нет. Нет никакого dynamicpage.js в разделе каталог страниц. Что ты теперь скажешь?

Ответ №1:

Джулиомальвес прав.

Создайте компонент, подобный этому [страница].js в каталоге страниц.

Следующее будет работать. Пожалуйста, попробуйте следовать

 const Page = ({ resData }) => {
const router = useRouter();   
const { page } = router.query;
    const [pageId, setPageId] = useState(0);

    useEffect(() => {
        onLoad();
    }, []);
    function onLoad() {

        let range = document.createRange();
        const wrapper = document.querySelector(".ic-container");
        wrapper.innerHTML = "";
        wrapper.appendChild(range.createContextualFragment(resData.PageContent));
    }

    return (
        <>
            <Head>
                <title>{resData.Title}</title>
                <meta property="og:description" name="description" content={resData.MetaDescription} key="description" />
                <meta property="og:keywords" name="keywords" content={resData.Keywords} key="keywords" />
                <meta property="og:title" name="title" content={resData.MetaTitle} key="title" />
                <meta property="og:author" name="author" content="test" key="author" />
                <link rel="stylesheet" href="/assets/minimalist-blocks/content.css" />
                <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" type="text/css" />
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
                <script
                    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
                    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
                    crossorigin="anonymous"
                ></script>

            </Head>
            <Layout>
                <div className="ic-container">
                    <div></div>
                </div>
            </Layout>
        </>
    );
}

export async function getServerSideProps(context) {
    const { page } = context.query;
    let resData = "";
    try {    
        const fetchResponse = await fetch("http://localhost:3001/asa/page/pageByPer/"   page );
        const data = await fetchResponse.json();
        const responseData = data amp;amp; data.page amp;amp; data.page.length > 0 ? data.page[0] : "";
        initialData = responseData;
        if (data) {
            if (data.isExist > 0) {
                lpageId = responseData.Id;
            }
        }
    } catch (e) {
        console.log(e);
    } finally {
    }
    return {
        props: {
        resData,
        },
    };
}
Метки: