Ad
Why Go Back Button Doesn't Trigger Client Side Navigation In Next.js App?
I have a simple Next.js application that uses GraphQL to load articles from a server. Dynamic routing works perfectly fine unless you reload the page while you are on some article and want to go back.
A typical situation is completely fine
Index -> [slug] -> go back (Index)
But the issue is in this situation
[slug] -> go back(Index)
The page won't trigger rerender and while the url is pointing to Index, content on the page stays the same.
I've checked if my Link components are written correctly and they are.
This a component on Index page that contains link to redirect
const Index: FunctionComponent<IArticlePreviewProps> = (props) => {
const { article }: { article: IArticlePreviewData } = props;
return (
<Link target="_blank" rel="nofollow noreferrer" href="/articles/[slug]" as={`/articles/${article.slug}`}>
<a>
<img src={article.thumbnail} alt=""/>
</a>
</Link>
)
}
And this is a component which is dynamic and shows article content
const Article: NextPage = (props) => {
const router = useRouter();
const { loading, data, error } = useQuery<IArticleQueryData>(ARTICLE_QUERY, {
variables: { id: router.query.slug }
});
if (loading) {
return null;
}
const article = data!.Article;
return (
<>
<div className="d-flex justify-content center">
<div className="container">
<div className="article">
<div className="article__header d-flex">
<div className="col-8 p-0 article__header-thumbnail">
<img src={article.thumbnail} alt=""/>
</div>
<div className="col-4 p-4 article__header-title d-flex flex-column justify-content-end">
<h1>{article.title}</h1>
<time className="article-date" dateTime={article.createdAt}>
{getArticlePreviewDate(article.createdAt)}
</time>
</div>
</div>
</div>
</div>
</div>
</>
)
}
Ad
Answer
It was just a bug in Next.js. It's already fixed.
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad