मैंने Next js और Redux के साथ गतिशील पृष्ठ बनाए हैं।

मेरे पास अपने वेब उपयोग के बारे में एक सरल प्रवाह है

  1. साइन इन करें

  2. next/router का उपयोग करके index.html पर रीडायरेक्ट करें।

  3. एक <Link href="/DYNAMIC_PAGE"/> क्लिक करें।

  4. /DYNAMIC_PAGE पेज दर्ज करें।

हर चरण ठीक काम कर रहा है, लेकिन चरण 3 और चरण 4 के बीच कुछ समस्याएं हैं।

जब मैंने <Link /> को /DYNAMIC_PAGE पर क्लिक किया और टैग किया, तो इसे फिर से लोड किया जाएगा।

और यह मेरे Redux राज्यों पर प्रभाव डालता है।

जब मैं DYNAMIC_PAGES दर्ज करता हूं, तो मैं पुनः लोड होने से बचना चाहता हूं

यदि आपको अधिक विवरण की आवश्यकता है, तो कृपया टिप्पणी छोड़ दें।

पहले ही, आपका बहुत धन्यवाद।

पृष्ठ/[id].tsx

import * as React from "react";
import { NextPage } from "next";
import Layout from "components/Layout";
import Content from "components/courses/Content";
import axios from "axios";

const ExamplePage: NextPage = (props: any) => {
  return (
    <Layout title="About | Next.js + TypeScript Example">
      <Content
        {...props.course}
      />
    </Layout>
  );
};

ExamplePage.getInitialProps = async (props: any) => {
  const course = await axios
    .get(
      `MY_API_URL/${
        props.query.id
      }`
    )
    .then(res => res.data)
    .catch(e => e.response);
  return { course };
};

export default ExamplePage;

<Link href={`/${props.itemId}`}>
  <a className="Card">
    <div className="img-wrap">
      <img src={props.imageUrl || "/static/images/sampleImage.jpg"} />
    </div>
  </a>
</Link>

1
kyun 30 जुलाई 2019, 04:27

1 उत्तर

सबसे बढ़िया उत्तर

अपने टैग के लिए निम्न कोड का प्रयोग करें।

<Link href={/[id]?id=${props.itemId}} as={/${props.itemId}}>
7
Muljayan 1 अगस्त 2019, 06:18
1
बहुत - बहुत धन्यवाद!
 – 
JordanW
4 पद 2019, 02:37