reactjs - nextjs中如何打开动态页面路径？
问题描述
我正在尝试通过使用 nextjs 应用程序来使用动态路径。
我正在开发一个 CMS 系统，我的页面通过 nextjs 运行。
在我的 react admin 应用程序中，用户可以添加和设计多个页面。
有一个最终用户 nextjs 应用程序允许用户获取这些动态页面。
例如：应用程序管理员添加了关于我们的页面，现在用户可以通过在浏览器中键入以下内容来访问此页面。
http://localhost:3000/aboutus
这应该工作，但它没有。第一件事是 nextjs 在我们尝试使用useRouter hook并得到一个pathname错误（它显示一个错误）并尝试找到物理上不存在的 aboutus.js 页面组件时给出错误。
第二件事是我们需要一个类似的 react 组件，App.js component以便我们可以识别动态页面并调用我们的逻辑来显示页面，但是在 nextjs 中没有类似App.js componentnorindex.js组件。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 && data.page && 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;
什么是最好的解决方法？感谢您的帮助
解决方案
Juliomalves 是对的。
在 pages 目录下创建一个类似 [page].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 && data.page && 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,
},
};
}
推荐阅读
- node.js - 结合 ExpressJS 路由器和 Angular 10 路由
- python - 如何使折线图成为一条连续的线
- android - 为什么广播接收器仅在华为设备上导致 ANR？
- html - 如何以角度添加另一个组件，它具有与前一个组件相同的数据以及一些额外的信息
- python - Python中时间相关网络中的最短路径
- css - 为什么我的 div 高度间距在它的容器中不一致？
- node.js - 如何解决linux服务器上的节点502错误？
- flutter - Flutter 如何设置堆栈小部件的样式
- php - 当我在 laravel 中显示带有 orderby 和 paginatiing 的帖子时出现错误
- javascript - 生产构建中的应用程序中断