I am working on Reactjs and using nextjs framework,Right now i want if url containing "?id=pinned" then different text should display,How can i do this ? Here is my current code in [slug.js]
return(
if(url containing pinned)
{
<div id="neww" className="neww"><h3>Pinned</h3></div>
}
else
{
<div id="neww" className="neww"><h3>Newest</h3></div>
}
)
Since it seems like you're using Next.js, you can use Next.js API to do this
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { id } = router.query
const isPinned = id === 'pinned'
if (isPinned) {
return (<div id="neww" className="neww"><h3>Pinned</h3></div>)
} else {
return (<div id="neww" className="neww"><h3>Newest</h3></div>)
}
}
Do this:
import { useRouter } from 'next/router'
const Post = () => {
const {query} = useRouter()
const isPinned = query.id === 'pinned'
return (<div id="neww" className="neww">
<h3>{isPinned ? 'Pinned': 'Newest'}</h3>
</div>)
}
ignore if else, you should try the ternary operator
return(
<div id="neww" className="neww">
<h3>
{(url.includes('pinned') ? "Pinned":"Newest" }
</h3>
</div>
)
You can use the query from router
Example
const router = useRouter();
const {id} = router.query;
return(
if(id === "pinned")
{
<div id="neww" className="neww"><h3>Pinned</h3></div>
}
else
{
<div id="neww" className="neww"><h3>Newest</h3></div>
}
)
Here is a way:
import { useRouter } from "next/router";
const router = useRouter();
const id = router.query["id"];
return(
if(id === "pinned")
{
<div id="neww" className="neww"><h3>Pinned</h3></div>
}
else
{
<div id="neww" className="neww"><h3>Newest</h3></div>
}
)
