पृष्ठ के बाद अलग व्यवहार पुनः लोड किया जाता है (ऐप उत्पादन मोड में है, प्रतिक्रिया और एक्सप्रेस द्वारा बनाया गया है)

विकास मोड में सब कुछ ठीक काम करता है। पहली नज़र में ऐप बिल्ड मोड में समान है (मैं सर्वर साइड के लिए एक्सप्रेस का उपयोग कर रहा हूं)। लेकिन जब मैं अपने पृष्ठ को रीफ्रेश करने का प्रयास करता हूं (यूआरएल में पैराम्स होते हैं) मुझे केवल प्राप्त होता है

{
surveyString: "[{"type":"radiogroup","name":"Favorite Character?","title":"Favorite Character?","isRequired":true,"colCount":1,"choices":["Walt","Hank","Jesse","Mike"]},{"type":"radiogroup","name":"Favorite Actor?","title":"Favorite Actor?","isRequired":true,"colCount":1,"choices":["Aaron Paul","Bryan Cranston","Jonathan Banks"]}]",
surveyTitle: "Breaking Bad Survey"
}

जो सर्वर से प्रतिक्रिया भेजता है, जो निश्चित रूप से मैं चाहता हूं, लेकिन किसी भी तरह ऐप इसे शामिल नहीं करता है।

त्रुटि जो मुझे क्रोम में प्राप्त होती है वह है

स्थानीय संसाधन लोड करने की अनुमति नहीं है: देखें-स्रोत

फ़ायरफ़ॉक्स में त्रुटि किसी तरह अलग दिखती है

सामग्री सुरक्षा नीति: पृष्ठ की सेटिंग ने एक संसाधन ...संसाधन लिंक... की लोडिंग को अवरुद्ध कर दिया है

इन त्रुटियों के माध्यम से मैंने सामग्री सुरक्षा नीति के बारे में स्वीकार किया, कुछ बुनियादी तरीका है कि कैसे एक्सप्रेस पैकेज इसे दूर करने के लिए काम करता है और इसी तरह ... लेकिन यह अलग कहानी है और मुझे आशा है कि मैं प्रतिक्रिया पक्ष पर समस्या का समाधान करूंगा।

मैं आशावादी हूं क्योंकि मेरे पास अन्य पृष्ठ पर एक href लिंक से समान व्यवहार है। जब मैं aHref को LinkTo ऐप से प्रतिस्थापित करता हूं तो अपवाद के रूप में काम करता है।

मैं लिंक पर क्लिक करता हूं और एक नए पेज पर सब कुछ ठीक है, जब तक मैं रीफ्रेश नहीं करता।

लिंक जीथब पेज के लिए है: कंपोनेंट जो रिफ्रेश नहीं रहता

function SingleSurvey(props) {
  const [complete, setComplete] = useState(false);
  const [voted, setVoted] = useState(false);
  const [json, setJson] = useState({});
  const [title, setTitle] = useState("");
  const [resultsDisplay, setResultsDisplay] = useState(false);

  const { id } = useParams();

  useEffect(() => {
    surveyServices.getSingle(id).then((res) => {
      const stringQuestions = JSON.parse(res.surveyString);
      setJson({ questions: stringQuestions });
      setTitle(res.surveyTitle);
    });
  }, [id]);

  useEffect(() => {
    const checkItem = window.localStorage.getItem(`chartVoted-${id}`);
    if (checkItem) {
      setVoted(true);
    }
    // eslint-disable-next-line
  }, []);

  function onComplete(result) {
    surveyServices.updateVotes({
      data: result.data,
      id,
    });
    window.localStorage.setItem(`chartVoted-${id}`, true);
    setComplete(true);
    setTimeout(() => {
      window.location.reload();
    }, 1100);
  }
  return (
    <main className="survey-page">
      {complete && <p className="survey-finished"></p>}
      {!voted ? (
        <>
          <Survey.Survey
            json={json}
            showCompletePage={false}
            onComplete={(result) => onComplete(result)}
          />
          <div className="show-results">
            <button
              className="btn-results"
              onClick={() => setResultsDisplay(!resultsDisplay)}
            >
              {resultsDisplay ? "Hide Charts" : "Show Charts"}
            </button>
            <div
              className="visible-results"
              style={{ display: resultsDisplay ? "" : "none" }}
            >
              <Result id={id} title={title} />
            </div>
          </div>
        </>
      ) : (
        <div className="just-results">
          <Result id={id} title={title} />
        </div>
      )}
    </main>
  );
}
export default SingleSurvey;

मार्ग सेटिंग स्विच करें

<Router>
      <Notification />
      <Switch>
        <Route exact path="/api/survey/single/:id" component={SingleSurvey} />
      </Switch>
</Router>

ReactDOM रेंडर, मैं मूल redux का उपयोग कर रहा हूँ

<Provider store={store}>
    <App />
</Provider>,

व्यक्त करना

app.use(express.static(path.join(__dirname, "build")));
app.use("/api/survey", surveyController);
app.use("/api/users", usersController);
app.use("/api/login", loginController);

app.get("/", function (req, res) {
  app.get("/*", function (req, res) {
    res.sendFile(path.join(__dirname, "build", "index.html"));
  });
});

यदि आप सीधे समस्या देखना चाहते हैं एप उसकेोकू पर अपलोड किया गया है।

मुझे आशा है कि मुझे कोई मूल्यवान जानकारी नहीं मिली है। किसी को भी पता है कि अविश्वसनीय रूप से कष्टप्रद समस्या को कैसे ठीक किया जाए?