Dynamic route rendering content dynamically #17346
-
|
Hi, members I have been stuck with this problem for a long time. I have 3 pages.
The
Note: To fetch the content from the CMS we have to send a POST request with the CMS credentials like username, password, and the page slug for the content. I am using axios library to send a post request and the method is inside post.js: import axios from 'axios';
const postCMS = async (slug) => {
const url = `${process.env.CMS_API_URL}/render-page/`;
let pageSlug = slug;
// If the pageSlug is not start with `/`, then create the slug with `/`
if (!pageSlug.startsWith('/')) {
pageSlug = `/${pageSlug}`;
}
const head = {
Accept: 'application/json',
'Content-Type': 'application/json'
};
const data = JSON.stringify({
username: process.env.CMS_API_USERNAME,
password: process.env.CMS_API_PASSWORD,
slug: pageSlug
});
try {
const response = await axios.post(url, data, {
headers: head
});
return response.data;
} catch (e) {
return e;
}
};
export default postCMS;But for the rendering content on the pages/categories/[slug].js:
The content is loading fine based on each slug. But when I click the category link which is located in the <Link href="/categories/[slug]" as="/categories/online-cloud-storage">
<a>Online Cloud Storage</a>
</Link>The dynamic content is load successfully but that dynamic content contains
They also work fine when I set the Link something like this. But after setting the link like the above method, the click is caused to hard reload the page. But I don't want this. Everything should work. When the user clicks on the category link. Is there a way to fix this? Code: pages/index.js: import React from 'react';
import Link from 'next/link';
const IndexPage = () => {
return (
<div>
<Link href="/categories">
<a>Categories</a>
</Link>
</div>
);
};
export default IndexPage;pages/categories/index.js: import React from 'react';
import Link from 'next/link';
const Categories = () => {
return (
<div>
<Link href="/categories/[slug]" as="/categories/online-cloud-storage">
<a>Online Cloud Storage</a>
</Link>
</div>
);
};
export default Categories;pages/categories/[slug].js: import React from 'react';
import Head from 'next/head';
import postCMS from '../../post';
const CategoryPage = ({ result }) => {
return (
<>
<Head>
{result && <link href={result.assets.stylesheets} rel="stylesheet" />}
</Head>
<div>
<h1>Category page CMS Content</h1>
<div dangerouslySetInnerHTML={{ __html: result.html }} />
</div>
</>
);
};
export const getServerSideProps = async (context) => {
const categorySlug = context.query.slug;
const result = await postCMS(categorySlug);
return {
props: {
result
}
};
};
export default CategoryPage; |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
I assume the accordion and other components are using javascript that is injected from the CMS? If so, |
Beta Was this translation helpful? Give feedback.
-
|
Your answers are really grateful and improving my knowledge. So pass the whole |
Beta Was this translation helpful? Give feedback.
-
|
You can't pass the whole result to The only way I can think you could do this would be to parse the I won't be able to help to that extent unfortunately. |
Beta Was this translation helpful? Give feedback.
-
|
Is getInitialProps can leverage this? |
Beta Was this translation helpful? Give feedback.
-
|
No, that won't help. You could just change your |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @jamesmosier for your time. |
Beta Was this translation helpful? Give feedback.
I assume the accordion and other components are using javascript that is injected from the CMS? If so,
dangerouslySetInnerHTMLdoes not work with<script>tags.