ম্যানুয়ালি রিফ্রেশ বা লেখার সময় প্রতিক্রিয়া-রাউটার ইউআরএলগুলি কাজ করে না

Question

আমি লিঙ্ক বোতামগুলিতে ক্লিক করার সময় আমি প্রতিক্রিয়া-রাউটারটি ব্যবহার করছি এবং এটি দুর্দান্ত কাজ করে তবে আমি যখন আমার ওয়েবপৃষ্ঠাটি রিফ্রেশ করি তখন এটি আমার যা ইচ্ছা তা লোড হয় না।

উদাহরণস্বরূপ, আমি আছি localhost/joblistএবং সবকিছু ঠিক আছে কারণ আমি এখানে একটি লিঙ্ক টিপে এসে পৌঁছেছি। তবে আমি যদি ওয়েবপৃষ্ঠাটি রিফ্রেশ করি তবে তা পেলাম:

Cannot GET /joblist

ডিফল্টরূপে, এটি এর মতো কাজ করে না। প্রাথমিকভাবে আমি আমার URL টি ছিল localhost/#/এবং localhost/#/joblistতারা পুরোপুরি জরিমানা করেন। তবে আমি এই জাতীয় ইউআরএল পছন্দ করি না, তাই এটি মুছে ফেলার চেষ্টা করে #আমি লিখেছিলাম:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

এই সমস্যাটি ঘটে না localhost/, এটি সর্বদা আমি যা চাই তা ফিরিয়ে দেয়।

সম্পাদনা: এই অ্যাপ্লিকেশনটি একক পৃষ্ঠার, সুতরাং /joblistকোনও সার্ভারে কিছু জিজ্ঞাসা করার প্রয়োজন নেই।

সম্পাদনা 2: আমার সম্পূর্ণ রাউটার।

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

Comments

আপনি যদি আপনার প্রধান ভ্রমণ সফটওয়্যার পৃষ্ঠাটি লোড করতে htaccess ব্যবহার না করেন এবং আপনার রাউটারকে লোকেশন ব্যবহার করতে

— চার্লস জন থম্পসন তৃতীয়

আপনি কীভাবে এই #প্রতীকটি মুছলেন? ধন্যবাদ!

— সুডোপ্লাজ

যদি আপনি কোনও এস 3 বাল্টিতে আপনার প্রতিক্রিয়া অ্যাপটি হোস্টিং করছেন তবে আপনি কেবল ত্রুটি নথিটি এতে সেট করতে পারেন index.html। এটি নিশ্চিত index.htmlহ'ল যাই হোক না কেন আঘাত হ'ল।

— ট্রেভর হুতো

আমার ক্ষেত্রে এটি উইন্ডোতে দুর্দান্ত কাজ করে তবে লিনাক্সে নয়

— এজাজ করিম

এটি আমার রেফারেন্সটিই আমার সমস্যার সমাধান করতে সহায়তা করেছে: github.com/facebook/create-react-app/blob/master/packages/…

— জিম্বোট্রন

Answer 1

_{গৃহীত উত্তর এবং এই প্রশ্নের জেনেরিক প্রকৃতির মন্তব্যগুলিতে ('কাজ করবেন না') দেখে আমি ভাবলাম যে এখানে জড়িত বিষয়গুলি সম্পর্কে কিছু সাধারণ ব্যাখ্যা করার জন্য এটি ভাল জায়গা হতে পারে। সুতরাং এই উত্তরটি ওপি-র নির্দিষ্ট ব্যবহারের ক্ষেত্রে ব্যাকগ্রাউন্ড তথ্য / বিস্তৃতকরণ হিসাবে উদ্দিষ্ট। আমার সাথে সহ্য করুন।}

সার্ভার-সাইড বনাম ক্লায়েন্ট-সাইড

এটি সম্পর্কে বুঝতে প্রথমে বড় জিনিসটি হ'ল এখন এমন দুটি জায়গা রয়েছে যেখানে ইউআরএল ব্যাখ্যা করা হয়, যেখানে 'পুরানো দিনগুলিতে' কেবল 1 থাকত। অতীতে, যখন জীবন সহজ ছিল, কিছু ব্যবহারকারী http://example.com/aboutসার্ভারে একটি অনুরোধ প্রেরণ করেছিলেন, যা ইউআরএলটির পাথ অংশটি খতিয়ে দেখেছিল, নির্ধারিত হয়েছে যে ব্যবহারকারীটি পৃষ্ঠার বিষয়ে অনুরোধ করছে এবং তারপরে সেই পৃষ্ঠাটি ফেরত পাঠিয়েছে।

ক্লায়েন্ট-সাইড রাউটিংয়ের সাথে যা প্রতিক্রিয়া-রাউটার সরবরাহ করে, জিনিসগুলি কম সহজ। প্রথমদিকে, ক্লায়েন্টের এখনও কোনও জেএস কোড লোড হয়নি। তাই সর্বদা প্রথম অনুরোধটি সর্বদা সার্ভারের কাছে থাকবে। এরপরে এমন একটি পৃষ্ঠা ফিরে আসবে যা প্রতিক্রিয়া এবং প্রতিক্রিয়া রাউটার ইত্যাদি লোড করার জন্য প্রয়োজনীয় স্ক্রিপ্ট ট্যাগগুলি অন্তর্ভুক্ত করবে those কেবলমাত্র যখন এই স্ক্রিপ্টগুলি লোড হয়ে গেছে তখনই দ্বিতীয় পর্যায়ে শুরু হবে। দ্বিতীয় ধাপে, যখন ব্যবহারকারী 'আমাদের সম্পর্কে' নেভিগেশন লিঙ্কে উদাহরণস্বরূপ ক্লিক করেন, ইউআরএল স্থানীয়ভাবে কেবল পরিবর্তিত হয় http://example.com/about( ইতিহাস এপিআই দ্বারা সম্ভব ) তবে সার্ভারের কাছে কোনও অনুরোধ করা হয়নি। পরিবর্তে, প্রতিক্রিয়া রাউটারটি ক্লায়েন্টের পক্ষ থেকে তার কাজটি করে, কোনটি প্রতিক্রিয়া দেখায় এটি সরবরাহ এবং রেন্ডার করে determin আপনার পৃষ্ঠাটি ধরে নেওয়া যে কোনও আরইএসটি কল করার দরকার নেই, এটি ইতিমধ্যে হয়ে গেছে। কোনও সার্ভারের অনুরোধ ছাড়াই আপনি বাসা থেকে আমাদের সম্পর্কে স্থানান্তরিত হয়েছেন।

সুতরাং মূলত আপনি যখন কোনও লিঙ্কটি ক্লিক করেন, কিছু জাভাস্ক্রিপ্ট চালিত হয় যা কোনও পৃষ্ঠা রিফ্রেশ না করে অ্যাড্রেস বারে ইউআরএলকে ম্যানিপুলেট করে , যার ফলস্বরূপ প্রতিক্রিয়া রাউটারটি ক্লায়েন্টের পাশে একটি পৃষ্ঠা রূপান্তর সম্পাদন করে ।

তবে এখন বিবেচনা করুন যদি আপনি ঠিকানা বারে URL টি কপি-পেস্ট করেন এবং কোনও বন্ধুর কাছে এটি ইমেল করেন। আপনার বন্ধুটি এখনও আপনার ওয়েবসাইট লোড করেনি। অন্য কথায়, তিনি এখনও প্রথম পর্যায়ে রয়েছেন । তার মেশিনে এখনও কোনও প্রতিক্রিয়া রাউটার চলছে না। সুতরাং তার ব্রাউজারটি একটি তৈরি করবে সার্ভারটি অনুরোধটি করতে http://example.com/about।

আর এখান থেকেই আপনার ঝামেলা শুরু হয়। এখন অবধি, আপনি কেবল আপনার সার্ভারের ওয়েবরুটে একটি স্ট্যাটিক এইচটিএমএল রেখে পালিয়ে যেতে পারেন। কিন্তু যে দিতে হবে 404অন্য সব URL গুলির জন্য ত্রুটি সার্ভার থেকে অনুরোধ । সেই একই URL গুলি ক্লায়েন্ট পক্ষের পক্ষে দুর্দান্ত কাজ করে , কারণ সেখানে প্রতিক্রিয়া রাউটার আপনার জন্য রাউটিং করছে তবে তারা ব্যর্থ হয় তবে আপনি যদি আপনার সার্ভারটি সেগুলি না বুঝে সেগুলি সার্ভার সাইডে হয় ।

সার্ভারের মিশ্রণ- এবং ক্লায়েন্ট-সাইড রুটিং

আপনি যদি http://example.com/aboutURL টি সার্ভার- এবং ক্লায়েন্ট-সাইড উভয় ক্ষেত্রেই কাজ করতে চান তবে আপনাকে এটির জন্য সার্ভার- এবং ক্লায়েন্ট সাইড উভয়দিকেই রুট সেট আপ করতে হবে। বুদ্ধি ঠিক আছে?

এবং এখানেই আপনার পছন্দগুলি শুরু হয়। সমাধানগুলি সম্পূর্ণরূপে সমস্যাটিকে বাইপাস করা থেকে শুরু করে, ক্যাচ-অল রুট দিয়ে যা বুটস্ট্র্যাপ এইচটিএমএল ফিরিয়ে দেয়, সম্পূর্ণ অন-আইসমোফিক পদ্ধতির দিকে যেখানে সার্ভার এবং ক্লায়েন্ট উভয়ই একই জেএস কোড চালায়।

।

সামগ্রিকভাবে সমস্যাটিকে বাইপাস করছে: হ্যাশ ইতিহাস

ব্রাউজার ইতিহাসের পরিবর্তে হ্যাশ ইতিহাসের সাথে , প্রায় পৃষ্ঠার জন্য আপনার ইউআরএলটি দেখতে এরকম কিছু লাগবে: হ্যাশ ( ) চিহ্নের পরে অংশটি সার্ভারে প্রেরণ করা হয়নি। সুতরাং সার্ভারটি কেবল প্রত্যাশা অনুযায়ী সূচী পৃষ্ঠাটি দেখে এবং প্রেরণ করে। প্রতিক্রিয়া-রাউটারটি অংশটি তুলে নিবে এবং সঠিক পৃষ্ঠাটি প্রদর্শন করবে।http://example.com/#/about#http://example.com/#/about

ডাউনসাইডস :

• 'কুৎসিত' ইউআরএল
• এই পদ্ধতির সাথে সার্ভার-সাইড রেন্ডারিং সম্ভব নয়। যতদূর অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশান (এসইও) সম্পর্কিত, আপনার ওয়েবসাইটটিতে কোনও কন্টেন্ট সহ একটি পৃষ্ঠা রয়েছে।

।

সকল-ক্যাচ

এই পদ্ধতির মাধ্যমে আপনি ব্যবহার ব্রাউজার ইতিহাস না, কিন্তু শুধু একটা সকল-ক্যাচ সার্ভার পাঠায় সেট আপ /*করার জন্যindex.html কার্যকরভাবে আপনি হ্যাশ ইতিহাস যতটা একই পরিস্থিতি দান। আপনার কাছে পরিষ্কার ইউআরএল রয়েছে এবং আপনার ব্যবহারকারীর সমস্ত পছন্দ অবৈধ না করেই আপনি এই স্কিমটি পরে উন্নত করতে পারেন।

ডাউনসাইডস :

• আরও জটিল সেট আপ
• তবুও ভাল এসইও নেই

।

অকুলীন

হাইব্রিড পদ্ধতির ক্ষেত্রে আপনি নির্দিষ্ট রুটের জন্য নির্দিষ্ট স্ক্রিপ্ট যুক্ত করে ক্যাচ-অল দৃশ্যের উপরে প্রসারিত করুন। অন্তর্ভুক্ত সামগ্রী সহ আপনার সাইটের সর্বাধিক গুরুত্বপূর্ণ পৃষ্ঠাগুলি ফিরিয়ে দিতে আপনি কিছু সাধারণ পিএইচপি স্ক্রিপ্ট তৈরি করতে পারেন, যাতে গুগলবট অন্তত আপনার পৃষ্ঠায় কী আছে তা দেখতে পারে।

ডাউনসাইডস :

• এমনকি আরও জটিল সেট আপ
• যে রুটগুলির জন্য আপনি বিশেষ চিকিত্সা দিচ্ছেন কেবল তার জন্য কেবল ভাল এসইও
• সার্ভার এবং ক্লায়েন্টে লিখিত সামগ্রী সরবরাহ করার জন্য নকল কোড

।

Isomorphic

আমরা যদি সার্ভার হিসাবে নোড জেএস ব্যবহার করি তবে আমরা উভয় প্রান্তে একই জেএস কোডটি চালাতে পারি ? এখন, আমরা আমাদের সমস্ত রুটগুলি একটি একক প্রতিক্রিয়া-রাউটার কনফিগারেশনে সংজ্ঞায়িত করেছি এবং আমাদের আমাদের রেন্ডারিং কোডটি নকল করার দরকার নেই। এটি 'পবিত্র কচুকা' তাই বলার জন্য। সার্ভারটি ঠিক একই মার্কআপ প্রেরণ করে যা আমরা শেষ করে দিই যদি ক্লায়েন্টের উপর পৃষ্ঠার স্থানান্তর ঘটে থাকে। এসইও-র ক্ষেত্রে এই সমাধানটি সর্বোত্তম।

ডাউনসাইডস :

• সার্ভার অবশ্যই জেএস চালাতে (সক্ষম হতে হবে)। আমি জাভা আইকিউ ন্যাশর্ন নিয়ে পরীক্ষা করেছি কিন্তু এটি আমার পক্ষে কাজ করছে না। অনুশীলনে এটির বেশিরভাগ অর্থ হ'ল আপনাকে অবশ্যই নোড জেএস ভিত্তিক সার্ভার ব্যবহার করতে হবে।
• অনেক জটিল পরিবেশগত সমস্যা ( windowসার্ভার-সাইড ইত্যাদি ব্যবহার করে)
• খাড়া লার্নিং কার্ভ

।

আমার কোনটি ব্যবহার করা উচিত?

আপনি যা পেতে পারেন তা চয়ন করুন। ব্যক্তিগতভাবে আমি মনে করি ক্যাচ-সেট সেট আপ করার পক্ষে যথেষ্ট সহজ, তাই এটি আমার সর্বনিম্ন হবে। এই সেটআপ আপনাকে সময়ের সাথে সাথে উন্নত করতে দেয় allows আপনি যদি ইতিমধ্যে আপনার সার্ভার প্ল্যাটফর্ম হিসাবে নোড জেএস ব্যবহার করে থাকেন তবে আমি অবশ্যই একটি আইসোমরফিক অ্যাপ্লিকেশনটি তদন্ত করব। হ্যাঁ প্রথমে এটি শক্ত, তবে একবার আপনি এটির ঝুলন্ত হয়ে গেলে এটি আসলে সমস্যার খুব মার্জিত সমাধান।

সুতরাং মূলত, আমার জন্য, এটি সিদ্ধান্ত নেওয়ার কারণ হবে। যদি আমার সার্ভার নোড জেএসে চলে, আমি আইসোমর্ফিক যাই; অন্যথায় আমি ক্যাপ-অল সলিউশনে যাব এবং সময় বাড়ার সাথে সাথে এসইও প্রয়োজনীয়তা এটির চাহিদা অনুযায়ী (হাইব্রিড সমাধান) প্রসারিত করব।

আপনি যদি প্রতিক্রিয়াটির সাথে আইসোমর্ফিক (যাকে 'ইউনিভার্সাল'ও বলা হয়) রেন্ডারিং সম্পর্কে আরও শিখতে চান তবে বিষয়টিতে কিছু ভাল টিউটোরিয়াল রয়েছে:

• আইসমোর্ফিক অ্যাপ্লিকেশনগুলির সাথে ভবিষ্যতে প্রতিক্রিয়া জানান
• রিঅ্যাক্টজেএসে আইসোমরফিক অ্যাপ্লিকেশন তৈরির ব্যথা এবং জয়
• নোড + কীভাবে কার্যকর করা যায় আইসোমর্ফিক জাভাস্ক্রিপ্ট প্রতিক্রিয়া জানানো এবং কেন এটি গুরুত্বপূর্ণ

এছাড়াও, আপনাকে শুরু করতে, আমি কিছু স্টার্টার কিটগুলি দেখার পরামর্শ দিই। প্রযুক্তি স্ট্যাকের জন্য আপনার পছন্দগুলির সাথে মেলে এমন একটি চয়ন করুন (মনে রাখবেন, এমভিসিতে প্রতিক্রিয়া কেবলমাত্র ভি V, একটি সম্পূর্ণ অ্যাপ্লিকেশন তৈরি করতে আপনার আরও স্টাফ প্রয়োজন)। ফেসবুক নিজেই প্রকাশিত একটিকে দেখে শুরু করুন:

• প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করুন

বা সম্প্রদায় দ্বারা অনেকের মধ্যে একটি বাছুন। এখন একটি দুর্দান্ত সাইট রয়েছে যা তাদের সকলকে সূচক করার চেষ্টা করে:

• আপনার নিখুঁত প্রতিক্রিয়া স্টার্টার প্রকল্পটি চয়ন করুন

আমি এগুলি দিয়ে শুরু করেছি:

• আইসোমর্ফিক স্টারটারকিট প্রতিক্রিয়া জানান
• Redux ইউনিভার্সাল হট উদাহরণ প্রতিক্রিয়া

বর্তমানে আমি সর্বজনীন রেন্ডারিংয়ের একটি হোম-ব্রিউ সংস্করণ ব্যবহার করছি যা উপরের দুটি স্টার্টার কিট দ্বারা অনুপ্রাণিত হয়েছিল, তবে সেগুলি এখন পুরানো।

আপনার উদ্দেশ্য সাথে সৌভাগ্য কামনা করছি!

Comments

দুর্দান্ত পোস্ট! আপনি কি আইসোমর্ফিক রিঅ্যাক্ট অ্যাপের জন্য স্টার্টার কিটের সাথে যাওয়ার পরামর্শ দিচ্ছেন? যদি তা হয় তবে আপনি নিজের পছন্দ মতো একটি উদাহরণ দিতে পারেন?

— ক্রিস

@ Paulos3000 আপনি কোন সার্ভারটি ব্যবহার করছেন তার উপর এটি নির্ভর করে। মূলত আপনি এর জন্য একটি রুট সংজ্ঞায়িত করেছেন /*এবং এটি আপনার HTML পৃষ্ঠায় প্রতিক্রিয়া জানান। এখানে জটিল জিনিস হ'ল এটি নিশ্চিত করা যে আপনি এই রুটের সাথে .js এবং .css ফাইলগুলির জন্য অনুরোধগুলি বাধা দিচ্ছেন না।

— স্টিজন ডি উইট

@ Paulos3000 এখানে কিছু সংশ্লিষ্ট প্রশ্নের জন্য, দেখুন: অ্যাপাচি / পিএইচপি জন্য , এক্সপ্রেস / JS জন্য , J2E / জাভা জন্য ।

— স্টিজন ডি উইট

হাই, আমি হ্যাশ সমাধানটি চেষ্টা করছি, তবে ভাগ্য নেই। পথ createMemoryHistory is not a functionত্রুটি। মনে মনে? stackoverflow.com/questions/45002573/…

— লিওন গাবান

@ লিওনগাবান এই উত্তরটি লেখা হওয়ার পরে মনে হচ্ছে, প্রতিক্রিয়া রাউটার তাদের বাস্তবায়ন পরিবর্তন করেছে। তাদের কাছে এখন বিভিন্ন ইতিহাসের বিভিন্ন রাউটার উদাহরণ রয়েছে এবং তারা পটভূমিতে ইতিহাসের কনফিগারেশন করে। প্রাথমিক নীতিগুলি এখনও একই still

— স্টিজন ডি উইট

Answer 2

এখানে উত্তরগুলি সবগুলিই সহায়ক, আমার জন্য যা কাজ করেছিল তা আমার ওয়েবপ্যাক সার্ভারটি রুটগুলি আশা করার জন্য কনফিগার করেছিল।

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

ইতিহাসঅপিফলব্যাকটিই আমার জন্য এই সমস্যাটি স্থির করেছে। এখন রাউটিংটি সঠিকভাবে কাজ করে এবং আমি পৃষ্ঠাটি রিফ্রেশ করতে পারি বা সরাসরি URL টি টাইপ করতে পারি। আপনার নোড সার্ভারের চারপাশের কাজের বিষয়ে চিন্তা করার দরকার নেই। এই উত্তরটি কেবলমাত্র যদি আপনি ওয়েবপ্যাক ব্যবহার করছেন তবে কাজ করে।

সম্পাদনা: কেন এটি প্রয়োজনীয় তার আরও বিশদ কারণে এখানে আমার উত্তর দেখুন: https://stackoverflow.com/a/37622953/5217568

Comments

মনে রাখবেন যে ওয়েবপ্যাক টিম প্রোডাক্টে ডেভ সার্ভারটি ব্যবহার করার বিরুদ্ধে সুপারিশ করে।

— স্টিজন ডি উইট

জেনেরিক বিকাশের উদ্দেশ্যে এটিই সেরা সমাধান। historyApiFallbackপর্যাপ্ত. অন্যান্য সমস্ত বিকল্প হিসাবে, এটি পতাকা সহ সিএলআই থেকেও সেট করা যেতে পারে --history-api-fallback।

— মার্কো লাজেরি

পছন্দ করেছেন এটি উন্নয়নের জন্য দ্রুত সমাধান তবে আপনাকে এখনও উত্পাদনের জন্য কিছু বের করতে হবে।

— স্টিজন ডি উইট

কন্টেন্টবেস: ': /' কারণ আপনার অ্যাপ্লিকেশন ফাইলগুলি ইউআরএল থেকে অ্যাক্সেস করতে পারে

— Nezih

Answer 3

আপনি আপনার .htaccessফাইল পরিবর্তন করতে পারেন এবং এটি সন্নিবেশ করতে পারেন :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

আমি ব্যবহার করছি react: "^16.12.0"এবং react-router: "^5.1.2" এই পদ্ধতিটি ক্যাচ-অল এবং সম্ভবত আপনাকে শুরু করার সহজতম উপায়।

Comments

এটি কাজ করে! এবং আপনি নিজের অ্যাপ্লিকেশনটির পুনর্গঠন করতে না চাইলে সবচেয়ে সহজ

— mhyassin

পুনর্লিখনইঙ্গাইন অনকে প্রথম লাইন হিসাবে ভুলে যাবেন না

— কাই কিং

নোট করুন এই উত্তরটি অ্যাপাচি সার্ভারে কনফিগারেশনের কথা উল্লেখ করছে। এটি কোনও প্রতিক্রিয়া অ্যাপ্লিকেশনটির অংশ নয়।

— কল্টন হিক্স

আমি উপরের উত্তরগুলি বুঝতে পারি না। টিউটরিয়ালদের কেউই বলেনি যে আমার লিঙ্কগুলি সরাসরি কাজ করবে না। তবে এই সহজ htaccess ফাইল কাজ করে। ধন্যবাদ

— থমাস উইলিয়ামস

এটি Next.js স্ট্যাটিক এক্সপোর্টের জন্যও কাজ করে। টমক্যাটটি নোডের অনুরূপ না হওয়ায় আমাদের পরবর্তী.জেএস স্ট্যাটিক এক্সপোর্টের জন্য এই অতিরিক্ত কনফিগারেশনটি দরকার need

— গিরি-জিদিগুন্টা

Answer 4

জন্য প্রতিক্রিয়া রাউটার V4 ব্যবহারকারী:

আপনি যদি অন্যান্য উত্তরে উল্লিখিত হ্যাশ ইতিহাসের কৌশল দ্বারা এই সমস্যাটি সমাধান করার চেষ্টা করেন তবে তা নোট করুন

<Router history={hashHistory} >

ভি 4 তে কাজ করে না, দয়া করে HashRouterপরিবর্তে ব্যবহার করুন:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

তথ্যসূত্র: হ্যাশরউটার

Comments

কেন হ্যাশরউটার এই সমস্যাটি ঠিক করে দেয় সে সম্পর্কে আপনি কোনও বিশদ দিতে পারেন? আপনার দেওয়া লিঙ্কটি আমার পক্ষে এটি ব্যাখ্যা করে না। এছাড়াও, পথে হ্যাশ লুকানোর কোনও উপায় আছে কি? আমি ব্রাউজাররউটার ব্যবহার করছি তবে এটি নিয়ে এটি 404 ইস্যুতে ছুটে এসেছি ..

— আইয়ান স্মিথ

Answer 5

ক্লায়েন্টে বা সার্ভারে নেভিগেশন ঘটে কিনা তার উপর নির্ভর করে রাউটারটিকে দুটি ভিন্ন উপায়ে কল করা যেতে পারে। আপনি এটি ক্লায়েন্ট-সাইড ক্রিয়াকলাপের জন্য কনফিগার করেছেন। কী প্যারামিটারটি রান পদ্ধতিতে দ্বিতীয়টি , অবস্থান।

আপনি যখন প্রতিক্রিয়া রাউটার লিঙ্ক উপাদানটি ব্যবহার করেন, এটি ব্রাউজারের নেভিগেশনকে অবরুদ্ধ করে এবং ক্লায়েন্ট-সাইড নেভিগেশন করতে ট্রানজিশনটি কল করে। আপনি হিস্টরিওলেশন ব্যবহার করছেন, সুতরাং এটি অ্যাড্রেস বারে নতুন ইউআরএল অনুকরণ করে নেভিগেশনের মায়া সম্পূর্ণ করতে HTML5 ইতিহাস API ব্যবহার করে। আপনি যদি পুরানো ব্রাউজারগুলি ব্যবহার করেন তবে এটি কাজ করবে না। আপনার হ্যাশলোকেশন উপাদানটি ব্যবহার করতে হবে।

আপনি যখন রিফ্রেশটি চাপান তখন আপনি প্রতিক্রিয়া এবং প্রতিক্রিয়া রাউটার কোডটি সমস্তকে বাইপাস করেন। সার্ভারটির জন্য অনুরোধ পেয়েছে /joblistএবং এটি অবশ্যই কিছু প্রত্যাবর্তন করবে। সার্ভারে আপনাকে যে পথটি অনুরোধ করা হয়েছে সেই runপদ্ধতিটি সঠিকভাবে রেন্ডার করার জন্য আপনাকে পাস করতে হবে । আপনি একই রুটের মানচিত্রটি ব্যবহার করতে পারেন তবে আপনাকে সম্ভবত অন্য কোনও কলের প্রয়োজন হবে Router.run। চার্লস হিসাবে উল্লেখ করেছেন, আপনি এটি পরিচালনা করতে ইউআরএল পুনর্লিখন ব্যবহার করতে পারেন। অন্য বিকল্প হ'ল সমস্ত অনুরোধগুলি পরিচালনা করতে নোড.জেএস সার্ভার ব্যবহার করা এবং অবস্থানের আর্গুমেন্ট হিসাবে পাথ মানটি পাস করা।

এক্সপ্রেসে, উদাহরণস্বরূপ, এটি দেখতে এর মতো হতে পারে:

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

নোট করুন যে অনুরোধের পথটি পাস হচ্ছে run। এটি করতে, আপনার কাছে এমন একটি সার্ভার-সাইড ভিউ ইঞ্জিন থাকা দরকার যা আপনি রেন্ডার করা এইচটিএমএল পাস করতে পারেন। renderToStringসার্ভারে প্রতিক্রিয়া ব্যবহার এবং চালানোর ক্ষেত্রে অন্যান্য অনেকগুলি বিবেচনা রয়েছে । পৃষ্ঠাটি যখন সার্ভারে রেন্ডার হয়ে যায়, যখন আপনার অ্যাপ্লিকেশনটি ক্লায়েন্টে লোড হয়, এটি আবার রেন্ডার হবে, প্রয়োজন অনুসারে সার্ভার-সাইড রেন্ডার করা এইচটিএমএল আপডেট করে।

Comments

মাফ করবেন, দয়া করে আপনি পরবর্তী বিবৃতিটি ব্যাখ্যা করতে পারেন "আপনি যখন রিফ্রেশ করবেন তখন আপনি প্রতিক্রিয়া এবং প্রতিক্রিয়া রাউটার কোডটি সমস্তটি বাইপাস করবেন"? কেন এমন হয়?

— ভিবি_

প্রতিক্রিয়া রাউটারটি সাধারণত ব্রাউজারের মধ্যেই বিভিন্ন 'পাথ' পরিচালনা করতে ব্যবহৃত হয়। এটি করার জন্য দুটি সাধারণ উপায় রয়েছে: পুরানো স্টাইলের হ্যাশ পাথ এবং নতুন ইতিহাসের এপিআই। একটি ব্রাউজার রিফ্রেশ একটি সার্ভার অনুরোধ করবে, যা আপনার ক্লায়েন্ট-পাশের প্রতিক্রিয়া রাউটার কোডকে বাইপাস করবে। আপনাকে সার্ভারে পাথ পরিচালনা করতে হবে (তবে আপনি যদি ইতিহাসের এপিআই ব্যবহার করেন তবেই)। আপনি এটির জন্য প্রতিক্রিয়া রাউটার ব্যবহার করতে পারেন, তবে আপনাকে উপরে বর্ণিত মতো কিছু করতে হবে।

— টড

বুঝেছি. তবে সার্ভারটি যদি নন-জেএস ভাষাতে থাকে তবে (কী জাভা বলা যাক)?

— ভিবি_

দুঃখিত… আপনার মানে এমন যে "রুটবিহীন" একটি রুট রেন্ডার করতে আপনার এক্সপ্রেস সার্ভারের প্রয়োজন? আমি প্রথম বিস্মিত হয়েছিলাম যে আইসোমর্ফিজমের সংজ্ঞাটি তার ধারণার মধ্যে ডেটা আনার সাথে অন্তর্ভুক্ত ছিল না (যদি আপনি ডেটা সার্ভারের সাথে ভিউ রেন্ডার করতে চান তবে জিনিসগুলি মারাত্মক জটিল, যদিও এটি একটি স্পষ্টত এসইও প্রয়োজন হবে - এবং আইসোমরফিজম এটি দাবি করে)। এখন আমি "ডাব্লুটিএফের প্রতিক্রিয়া" এর মতো, সিরিয়াসলি… আমি ভুল হলে আমাকে সংশোধন করি, অ্যাম্বার / কৌণিক / ব্যাকবোনকে কোনও রুট রেন্ডার করার জন্য কোনও সার্ভারের জিনিস দরকার হয় কি? আমি রুটগুলি ব্যবহার করার জন্য এই ফুলে যাওয়া প্রয়োজনীয়তাটি সত্যিই বুঝতে পারি না

— বেন

এর অর্থ কি এই যে প্রতিক্রিয়া-রাউটারে রিফ্রেশ কাজ করে না যদি আমার প্রতিক্রিয়া প্রয়োগটি আইসমোরফিক হয় না?

— ম্যাট

Answer 6

আপনার সূচক html এ head, নিম্নলিখিতগুলি যুক্ত করুন:

<base href="/">
<!-- This must come before the css and javascripts -->

তারপরে ওয়েবপ্যাক ডেভ সার্ভার দিয়ে চলার সময় এই কমান্ডটি ব্যবহার করুন।

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

--history-api-fallback গুরুত্বপূর্ণ অংশ

Comments

এটি দুর্দান্ত কাজ করেছে! আপনি কীভাবে সেই সমাধান পেয়েছেন / খুঁজে পেয়েছেন সে সম্পর্কে আরও কিছু পড়ার জন্য কোনও লিঙ্ক?

— জাস্টড্যান

ভাই দুঃখিত. এটি পরীক্ষার এবং ত্রুটির চেষ্টা-ও-সত্য প্রযুক্তির মাধ্যমে খুঁজে পেয়েছে।

— Efe Ariaroo

এটি উল্লেখ করার মতো যে আপনি যদি বেস হ্রেফ ব্যবহার করেন /তবে HashRouterতা কাজ করে না (আপনি যদি হ্যাশ রাউটিং ব্যবহার করছেন)

— রবি অ্যাভারিল

<বেস href = "/"> ট্যাগটি এটি আমার জন্য করেছিল। এর জন্য ধন্যবাদ. ওয়েবপ্যাক ডেভ সার্ভারটি </ bundle> / পথ থেকে বান্ডিলটি ধরার চেষ্টা করে চলেছিল এবং ব্যর্থ হয়।

— মালিসবাদ

Answer 7

আমি এখনই একটি ওয়েবসাইট তৈরি করতে তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন ব্যবহার করেছি এবং একই সমস্যাটি এখানে উপস্থাপন করেছি। আমি প্যাকেজ BrowserRoutingথেকে ব্যবহার react-router-dom। আমি একটি এনগিনেক্স সার্ভারে চলছে এবং আমার কী সমাধান করেছে তা নিম্নলিখিতগুলিতে যুক্ত করা হয়েছিল/etc/nginx/yourconfig.conf

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

যা .htaccessআপনি অ্যাপাচি চালিয়ে যাচ্ছেন সেই ক্ষেত্রে নিম্নলিখিতটি যুক্ত করার সাথে সম্পর্কিত

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

এটি ফেসবুক নিজেই প্রস্তাবিত সমাধান বলে মনে হয় এবং এটি এখানে পাওয়া যাবে

Comments

বাহ, এনজিনেক্সের জন্য এত সহজ সমাধান; নতুন এনগিনেক্স ব্যবহারকারী হিসাবে কবজির মতো কাজ করে। খালি কপি-পেস্ট করুন এবং যেতে ভাল। অফিসিয়াল fb ডকুমেন্টেশনের সাথে লিঙ্ক করার জন্য +1। যাওয়ার পথ।

— ব্যবহারকারী 3773048

রেকর্ডের জন্য: আমি এনজিএনএক্স এবং একটি কৌণিক অ্যাপ্লিকেশন সহ AWS ইনস্ট্যান্স ব্যবহার করছি। এইটা কাজ করে.

— দিয়েগো সারমিয়েন্টো

তুমি আমাকে বাঁচাও আমি গতকাল থেকে আমার সমস্যার সমাধান করার চেষ্টা করছিলাম আমি দু'টি সমাধান ক্লান্ত করেছিলাম তবে আমি ব্যর্থ হয়েছি। অবশেষে আপনি আমাকে এই রাউটার সমস্যার সমাধান করতে সহায়তা করেছেন। আহ অনেক ধন্যবাদ ভাই

— শরীফুর রবিন

"প্রতিক্রিয়া": "^ 16.8.6", "প্রতিক্রিয়া-রাউটার": "^ 5.0.1" এর জন্য আলাদা কি প্রয়োজনীয় কিছু আছে? আমি এই সমাধানগুলি চেষ্টা করেছি (উভয়ই এনগিনেক্স এবং অ্যাপাচি) এবং সেগুলি কাজ করে না।

— মার্ক এ তাগলিয়াফেরো

যেহেতু ফেসবুক এ সংক্রান্ত তার ডকুমেন্টেশনগুলি পরিবর্তন করে নি আমি কেবল ধরে নিতে পারি প্রক্রিয়াটি একই। যদিও আমি কিছুক্ষন চেষ্টা করে দেখিনি।

— এইডিন

Answer 8

এটি আপনার সমস্যার সমাধান করতে পারে

প্রোডাকশন মোডে রিঅ্যাক্টজেএস অ্যাপ্লিকেশনটিতেও আমি একই সমস্যার মুখোমুখি হয়েছি। সমস্যাটির 2 সমাধান এখানে।

1. এর স্থানে ব্রাউজারের ইতিহাসের পরিবর্তে "হ্যাশ ইতিহাস" এ রাউটিং ইতিহাস পরিবর্তন করুন

<Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
</Router>

এবার কমান্ডটি ব্যবহার করে অ্যাপটি তৈরি করুন

sudo npm run build

তারপরে বিল্ড ফোল্ডারটি আপনার var / www / ফোল্ডারে রাখুন, এখন অ্যাপ্লিকেশনটি প্রতিটি url- এ # ট্যাগ যুক্ত করে ভাল কাজ করছে। মত

লোকালহোস্ট / # / হোম লোকালহোস্ট / # / প্রায়

সমাধান 2: ব্রাউজার ব্যবহার করে # ট্যাগ ছাড়াই ইতিহাস,

আপনার রাউটারে আপনার ইতিহাস = {ব্রাউজারের ইতিহাস} সেট করুন, এখন এটি sudo npm রান বিল্ড ব্যবহার করে তৈরি করুন।

404 পাওয়া যায়নি পৃষ্ঠাটি সমাধান করার জন্য আপনার "কনফ" ফাইলটি তৈরি করা দরকার, কনফ ফাইলটি এই জাতীয় হওয়া উচিত।

আপনার টার্মিনালটি খুলুন নীচের কমান্ডগুলি টাইপ করুন

সিডি / ইত্যাদি / অ্যাপাচি 2 / সাইটগুলি উপলব্ধ ls ন্যানো নমুনা.কোনফ এতে নীচের সামগ্রী যুক্ত করুন।

<VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

এখন আপনাকে নিম্নলিখিত কমান্ডটি ব্যবহার করে নমুনা.কনফ ফাইলটি সক্ষম করতে হবে

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

তারপরে এটি আপনাকে অ্যাডোচি সার্ভারটি পুনরায় লোড করতে অনুরোধ করবে, sudo পরিষেবা অ্যাপাচি 2 পুনরায় লোড বা পুনঃসূচনা ব্যবহার করে

তারপরে আপনার লোকালহোস্ট / বিল্ড ফোল্ডারটি খুলুন এবং নীচের সামগ্রীর সাথে .htaccess ফাইল যুক্ত করুন।

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

এখন অ্যাপটি স্বাভাবিকভাবে কাজ করছে।

দ্রষ্টব্য: আপনার স্থানীয় আইপি ঠিকানায় 0.0.0.0 আইপি পরিবর্তন করুন।

এ সম্পর্কে যদি কোনও সন্দেহ থাকে তবে নির্দ্বিধায় কোনও মন্তব্য করুন।

আমি আশা করি এটি অন্যদের জন্য সহায়ক।

Comments

প্রথম সমাধানটি কি কাজ করবে "react-router-dom": "^5.1.2"<BrowserRouter>

— ?,

Answer 9

আপনি যদি এডাব্লুএস স্ট্যাটিক এস 3 হোস্টিং এবং ক্লাউডফ্রন্টের মাধ্যমে একটি প্রতিক্রিয়া অ্যাপটি হোস্টিং করছেন

এই সমস্যাটি ক্লাউডফ্রন্ট একটি 403 অ্যাক্সেস অস্বীকৃত বার্তা দিয়ে সাড়া দিয়ে নিজেই উপস্থাপন করেছিল কারণ এটি আমার এস 3 ফোল্ডারের মধ্যে / কিছু / অন্য / পথ উপস্থিত থাকার প্রত্যাশা করেছিল, তবে সেই পথটি কেবল প্রতিক্রিয়া-রাউটারের সাথে রিঅ্যাক্টের রাউটিংয়ে অভ্যন্তরীণভাবে বিদ্যমান।

সমাধানটি ছিল একটি বিতরণ ত্রুটি পৃষ্ঠাগুলির নিয়ম সেট আপ করা। ক্লাউডফ্রন্ট সেটিংসে যান এবং আপনার বিতরণ চয়ন করুন। এরপরে "ত্রুটি পৃষ্ঠাগুলি" ট্যাবে যান। "কাস্টম ত্রুটি প্রতিক্রিয়া তৈরি করুন" ক্লিক করুন এবং 403 এর জন্য একটি এন্ট্রি যুক্ত করুন যেহেতু আমরা পেয়েছি ত্রুটি স্থিতি কোড। প্রতিক্রিয়া পৃষ্ঠাটি पथটিকে /index.html এ এবং স্থিতি কোডটি 200 এ সেট করুন end শেষ ফলাফলটি এর সরলতার সাথে আমাকে অবাক করে। সূচী পৃষ্ঠাটি পরিবেশন করা হয় তবে ব্রাউজারে ইউআরএল সংরক্ষণ করা হয়, সুতরাং অ্যাপ্লিকেশনটি লোড হওয়ার পরে এটি ইউআরএল পথটি সনাক্ত করে এবং পছন্দসই রুটে নেভিগেট করে।

ত্রুটি পৃষ্ঠা 403 বিধি

Comments

এটাই আমার দরকার ছিল। ধন্যবাদ.

— জোনাথন

সুতরাং .. আপনার সমস্ত url কাজ করে, তবে স্থিতি কোড 403 ফেরত দেয়? এটা সঠিক নয়. প্রত্যাশিত স্থিতির কোডগুলি 2XX সীমার মধ্যে হওয়া উচিত।

— স্টিজন ডি উইট

@ স্টিজান্ডেউইট আমি নিশ্চিত না আপনি সঠিকভাবে বুঝতে পেরেছেন। ক্লাউডফ্রন্ট সবকিছু পরিচালনা করবে - ক্লায়েন্ট কোনও 403 স্থিতি কোড দেখতে পাবে না। পুনরায় রাউটিংটি সার্ভার-সাইডে ঘটে, সূচী পাতাটি রেন্ডার করে, ইউআরএল বজায় রাখে এবং ফলস্বরূপ সঠিক রুট সরবরাহ করে।

— th3morg

@ th3morg আহ আমি এখন দেখতে পাচ্ছি। আমি মিস করেছি যে এটি আপনাকে প্রতিক্রিয়া স্থিতি কোডটি 200 হিসাবে পূরণ করতে দেয় So সুতরাং মূলত আপনি 2003 স্ট্যাটাসে 403 স্থিতি ম্যাপ করছেন ... ঠিক আছে ... বাদে অন্য কোনও কারণে আপনি যদি ফলাফল হিসাবে 403 পান তবে তা ব্যতীত আপনি এটির কারণে এটি দেখতে সক্ষম হবেন না।

— স্টিজন ডি উইট

এই @ th3morg জন্য ধন্যবাদ। এই সেটআপটি কি বহু-স্তরের পাথের জন্যও কাজ করে? এটি আমার পক্ষে দুর্দান্ত কাজ করে যদি ডোমেইন / সাইনআপ, ডোমেন / লগইন, ডোমেন / <ডকুমেন্ট আইডি> এর মতো মূল স্তরের কোনও পথ, তবে এটি ডোমেন / ডকুমেন্ট / <ডকুমেন্টআইডি> এর মতো বহু-স্তরের পাথের জন্য কাজ করে না।

— পারগলস

Answer 10

এটি সক্ষম করার জন্য ওয়েবপ্যাক ডেভ সার্ভারের একটি বিকল্প রয়েছে। খুলুন package.jsonএবং যোগ করুন--history-api-fallback । এই সমাধানগুলি আমার পক্ষে কাজ করেছিল।

প্রতিক্রিয়া-রাউটার-টিউটোরিয়াল

Comments

এটি ঠিক আছে webpack-dev-serverতবে আমি কীভাবে এটি নির্মাণের জন্য ঠিক করব?

— হুসেন

Answer 11

আপনি যদি আইআইএস-এ আপনার প্রতিক্রিয়া অ্যাপটি হোস্ট করছেন তবে কেবল একটি ওয়েবকনফিগ ফাইল যুক্ত করুন:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

এটি আইআইএস সার্ভারকে 404 ত্রুটির পরিবর্তে ক্লায়েন্টকে মূল পৃষ্ঠাটি ফিরে আসতে বলবে এবং হ্যাশ ইতিহাস ব্যবহার করার দরকার নেই।

Comments

ধন্যবাদ ভাই!!!! এটা কাজ!

— থানহ বাও

Answer 12

এটি এতে যুক্ত করুন webpack.config.js:

devServer: {
    historyApiFallback: true
}

Comments

এটি দেবের পক্ষে দুর্দান্ত, তবে উত্পাদন বাড়ানোর ক্ষেত্রে সাহায্য করে না।

— কেফংক

Answer 13

উত্পাদন স্ট্যাক: প্রতিক্রিয়া, প্রতিক্রিয়া রাউটার ভি 4, ব্রাউজারউউটার, এক্সপ্রেস, এনগিনেক্স

1) সুন্দর ইউআরএলগুলির জন্য ব্যবহারকারী ব্রাউজাররউটার ter

// app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           // your routes here
        </Router>
    )
  }
}

2) ব্যবহার করে সমস্ত অজানা অনুরোধে index.html যুক্ত করুন /*

// server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3) সাথে বান্ডেল ওয়েবপ্যাক webpack -p

4) রান nodemon server.js বাnode server.js

সম্পাদনা: আপনি nginx এটি সার্ভার ব্লকে পরিচালনা করতে এবং পদক্ষেপ 2 উপেক্ষা করতে চাইতে পারেন:

location / {
    try_files $uri /index.html;
}

Comments

— অপরিচ্ছন্নতার

@ গৌতম আপনার সার্ভার.জেএস ফাইলের শীর্ষে হয় import path from 'pathঅথবাconst path = require('path')

— আইজাক পাক

পদক্ষেপ 2 (সবার সাথে ধরা /*) সবেমাত্র আমার দিনটি বাঁচিয়েছে। ধন্যবাদ! :)

— আটলাস 7

এইগুলি

— cjjenkinson

Answer 14

আপনি যদি তৈরি করুন প্রতিক্রিয়া অ্যাপ্লিকেশন ব্যবহার করছেন:

অনেক বড় বড় হোস্টিং প্ল্যাটফর্মের জন্য সমাধান সঙ্গে এই সংখ্যার যদিও একটি দুর্দান্ত হাঁটার যে আপনাকে খুঁজে পারেন এখানে প্রতিক্রিয়া তৈরি করুন অ্যাপ পৃষ্ঠাতে। উদাহরণস্বরূপ, আমি আমার ফ্রন্টএন্ড কোডের জন্য প্রতিক্রিয়া রাউটার ভি 4 এবং নেটলিফ ব্যবহার করি। এটি যা গ্রহণ করেছিল তা হ'ল আমার সর্বজনীন ফোল্ডারে ("_redirects") এবং সেই ফাইলটিতে কোডের একটি লাইন 1 ফাইল যুক্ত করা:

/*  /index.html  200

এখন আমার ওয়েবসাইটটি ব্রাউজারে প্রবেশ করার সময় বা যখন কেউ রিফ্রেশকে আঘাত করে তখন mysite.com/pricing এর মতো পাথগুলি যথাযথভাবে সরবরাহ করে।

Answer 15

নীচের কোড সহ পাবলিক ফোল্ডারের ভিতরে ".htaccess" ফাইল যুক্ত করার চেষ্টা করুন।

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]  

Comments

ধন্যবাদ, এটাই অ্যাপাচি দিয়ে ফেডোরার 28-এ আমার জন্য কাজ করেছিল। উপরোক্ত পুনর্লিখনের নিয়মগুলির মধ্যে বা সিআরএ পৃষ্ঠায় থাকা কোনওটিই আমার পক্ষে কাজ করেনি। আমি তাদের পৃথক .htaccess ফাইলের পরিবর্তে ভার্চুয়াল হোস্ট সেটআপে যুক্ত করেছি।

— বোয়ারে

Answer 16

আপনার যদি আপনার সূচক। Html এ পড়ে থাকে তবে নিশ্চিত হয়ে নিন যে আপনার সূচী। Html ফাইলে আপনার এটি রয়েছে:

<script>
  System.config({ baseURL: '/' });
</script>

এটি প্রকল্প থেকে প্রকল্পে পৃথক হতে পারে।

Comments

এটি আপনার এইচটিএমএলতে যুক্ত করুন head: <বেস href = "/">

— এফে আরিয়ারু

Answer 17

আপনি যদি ফায়ারবেস ব্যবহার করছেন তবে আপনাকে যা করতে হবে তা নিশ্চিত করেই আপনার অ্যাপ্লিকেশনের মূলের (হোস্টিং বিভাগে) আপনার ফায়ারবেস.জসন ফাইলে একটি পুনর্লিখন সম্পত্তি পেয়েছেন।

উদাহরণ স্বরূপ:

{ 
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]    
  }
}

আশা করি এটি হতাশার এবং সময় নষ্ট করার জন্য অন্য কাউকে বাঁচায়।

শুভ কোডিং ...

এই বিষয়ে আরও পড়া:

https://firebase.google.com/docs/hosting/full-config#rewrites

ফায়ারবেস সিএলআই: "একটি একক পৃষ্ঠার অ্যাপ্লিকেশন হিসাবে কনফিগার করুন (সমস্ত url /index.html এ পুনরায় লিখুন)"

Comments

আপনি কিংবদন্তি

— পারিনিফারিস

Answer 18

প্রতিক্রিয়া রাউটার (অ্যাপাচি) দিয়ে আমি আমার এসপিএর সমাধান পেয়েছি। শুধু .htaccess এ যোগ করুন

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

উত্স: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

Answer 19

আমি এখনও সার্ভার সাইড রেন্ডারিং ব্যবহার করছি না তবে আমি ওপি হিসাবে একই সমস্যাটি আঘাত করেছি যেখানে লিঙ্কটি বেশিরভাগ সময় সূক্ষ্মভাবে কাজ করে বলে মনে হয় তবে আমার প্যারামিটার থাকার পরে ব্যর্থ হয়েছিল। আমি আমার সমাধানটি এখানে কাউকে সহায়তা করে কিনা তা ডকুমেন্ট করব।

আমার মূল জেএসএক্স এতে রয়েছে:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

এটি প্রথম মিলের লিঙ্কের জন্য ঠিক কাজ করে কিন্তু যখন: আইডি পরিবর্তন হয় <Link> মডেলটির বিশদ পৃষ্ঠায় নেডের মত প্রকাশের পরিবর্তিত হয়, ব্রাউজার বারে ইউআরএল পরিবর্তিত হয় তবে লিঙ্কযুক্ত মডেলটি প্রতিফলিত করার জন্য পৃষ্ঠার বিষয়বস্তু প্রাথমিকভাবে পরিবর্তন হয় নি।

সমস্যাটি ছিল আমি props.params.idমডেলটি সেট করতে ব্যবহার করেছিলাম componentDidMount। উপাদানটি কেবল একবার মাউন্ট করা হয়েছে যার অর্থ এই যে প্রথম মডেলটি হ'ল পৃষ্ঠায় স্টিক থাকে এবং পরবর্তী লিঙ্কগুলি প্রপস পরিবর্তন করে তবে পৃষ্ঠাটি অপরিবর্তিত অবস্থায় ছেড়ে যায়।

উভয় componentDidMountএবং ইন componentWillReceiveProps(যখন এটি পরবর্তী প্রপসের উপর ভিত্তি করে) অংশে অবস্থিত মডেলটি সেট করা সমস্যার সমাধান করে এবং পছন্দসই মডেলটি প্রতিফলিত করার জন্য পৃষ্ঠার সামগ্রী পরিবর্তন করে।

Comments

আপনি যদি সার্ভার-সাইড রেন্ডারিংয়ের জন্য চেষ্টা করতে চান তবে কম্পোনেন্ট কনস্ট্রাক্টর (যার অ্যাক্সেস রয়েছে props) টিও ব্যবহার করা ভাল componentDidMount। কারণ componentDidMountশুধুমাত্র ব্রাউজারে বলা হয়। এর উদ্দেশ্য হ'ল ডিওএমের সাথে স্টাফ করা, যেমন ইভেন্ট শ্রোতাদের সাথে যুক্ত করা bodyইত্যাদি যা আপনি করতে পারবেন না render।

— স্টিজন ডি উইট

Answer 20

এই বিষয়টি কিছুটা পুরাতন এবং সমাধান করা তবে আমি আপনাকে একটি সহজ, পরিষ্কার এবং আরও ভাল সমাধানের পরামর্শ দিতে চাই। আপনি ওয়েব সার্ভার ব্যবহার করলে এটি কাজ করে।

প্রতিটি ওয়েব সার্ভারে HTTP 404 এর ক্ষেত্রে ব্যবহারকারীকে একটি ত্রুটি পৃষ্ঠায় পুনঃনির্দেশ করার ক্ষমতা রয়েছে this এই সমস্যাটি সমাধান করার জন্য আপনাকে ব্যবহারকারীকে সূচক পৃষ্ঠাতে পুনর্নির্দেশ করতে হবে।

আপনি যদি জাভা বেস সার্ভার (টোমক্যাট বা কোনও জাভা অ্যাপ্লিকেশন সার্ভার) ব্যবহার করেন তবে সমাধানটি নিম্নলিখিত হতে পারে:

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

উদাহরণ:

• Http://example.com/about পান
• ওয়েব সার্ভার http 404 নিক্ষেপ করে কারণ এই পৃষ্ঠাটি সার্ভারের পাশে উপস্থিত নেই
• ত্রুটি পৃষ্ঠা কনফিগারেশন সার্ভারকে জানিয়েছে যে সূচক.জস্প পৃষ্ঠায় ব্যবহারকারীকে ফিরে পাঠায়
• তারপরে জেএস ক্লায়েন্টের পাশের বাকী কাজটি করবে কারণ ক্লায়েন্টের পক্ষের ইউআরএল এখনও http://example.com/about ।

এটাই, আর কোনও যাদু দরকার নেই :)

Comments

এই দুর্দান্ত ছিল! আমি ওয়াইল্ডফ্লাই 10.1 সার্ভারটি ব্যবহার করছি এবং আমার ওয়েব.এক্সএমএল ফাইলে এই আপডেটটি তৈরি করেছি, কেবলমাত্র আমার কাছে '/' তে সেট করা আছে। এটি ছিল কারণ আমার প্রতিক্রিয়া কোডটিতে আমি ব্রাউজারের ইতিহাসটি এর মতো ব্যবহার করেছি:const browserHistory = useRouterHistory(createHistory)({ basename: '/<appname>' });

— চক এল

আপনি কি নিশ্চিত যে এটি SEO কে প্রভাবিত করে না? আপনি যে পৃষ্ঠাগুলি বাস্তবে বিদ্যমান তাদের একটি 404 স্থিতি দিচ্ছেন। ব্যবহারকারীর এটি কখনও উপলব্ধি করতে পারে না, তবে বটগুলি খুব বেশি মনোযোগ দেয়, বাস্তবে এগুলি এত বেশি করে দেয় যে তারা আপনার পৃষ্ঠাকে স্ক্র্যাপ করবে না।

— subharb

Answer 21

আপনি যদি ব্যাকএন্ডে এক্সপ্রেস বা অন্য কোনও কাঠামো ব্যবহার করছেন, আপনি নীচের মতো অনুরূপ কনফিগারেশন যুক্ত করতে পারেন এবং কনফিগারেশনে ওয়েবপ্যাক পাবলিক পাথটি পরীক্ষা করতে পারেন, আপনি ব্রাউজাররউটার ব্যবহার করছেন এমন কি পুনরায় লোড করার পরেও এটি ঠিক কাজ করা উচিত

expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
});

Comments

এটি সহজ সমাধান। নোট করুন যে এই রুটটি অন্য যে কোনও রুটের পরে যেতে হবে কারণ এটি

— সমস্তই

Answer 22

রিফ্রেশ বা সরাসরি ইউআরএল কল করার সময় "জিইটি / ইউআরএল করতে পারে না" ত্রুটি ঠিক করা।

প্রদত্ত লিঙ্কটি এর মতো রুটগুলি আশা করতে আপনার ওয়েবপ্যাক.কনফিগ.জেগুলি কনফিগার করুন ।

module.exports = {
  entry: './app/index.js',
  output: {
       path: path.join(__dirname, '/bundle'),
       filename: 'index_bundle.js',
       publicPath: '/'
  },

Answer 23

আমি যেমন ব্যবহার করছি। নেট কোর এমভিসি এর মতো কিছু আমাকে সহায়তা করেছিল:

    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var url = Request.Path + Request.QueryString;
            return App(url);
        }

        [Route("App")]
        public IActionResult App(string url)
        {
            return View("/wwwroot/app/build/index.html");
        }
   }

মূলত এমভিসি সাইডে, মেলে না এমন সমস্ত রুটগুলি Home/Indexযেমন উল্লেখ করা হয়েছে তেমন পড়ে যাবে startup.cs। এর ভিতরে Indexমূল অনুরোধ url পাওয়া এবং যেখানে প্রয়োজন সেখানে এটি পাস করা সম্ভব।

startup.cs

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });

Comments

ওয়েব এপি অ্যাপ থেকে আলাদা হয়ে গেলে আপনি কীভাবে এটি পরিচালনা করবেন?

— dananrr91

@ Dayanrr91 যদি আপনার প্রকল্পের ওয়েব এপিআই থাকে তবে আপনার কোনওভাবেই সার্ভার সাইড রাউটিংয়ের প্রয়োজন হবে না। এবং আপনার প্রতিক্রিয়া-রাউটারটি আমি বিশ্বাস করি ইউআরএলটি পড়া উচিত এবং উপযুক্ত রাউটিং করা উচিত। কিছুই এটিকে অবরুদ্ধ করা উচিত নয়

— এলনূর

আপনার মন্তব্যটি খুব প্রশংসিত হয়েছে, তবে তারপরে আমার একটি প্রশ্ন রয়েছে, আমি কেবল হ্যাশরউটারকে যুক্ত করেছি, তবে এখন আমি যখন কোনও ইউআরএল ম্যানুয়ালি প্রবেশ করি তখন এটি আমার বাড়ির পুনঃনির্দেশের পরিবর্তে আমার বাড়ির উপাদান এবং তারপরে যে অংশটি চেষ্টা করার চেষ্টা করছিলাম তা পুনঃনির্দেশিত হবে ভিতরে ,ুকতে, এর জন্য কি কোনও কর্মক্ষেত্র রয়েছে?

— dayanrr91

@ Dayanrr91 আসলে কোন ধারণা নেই, কখনও হ্যাশ-হটার চেষ্টা করেন নি তবে আমি মনে করি আপনার কোডের সাথে কিছু করা উচিত। হ্যাশআউটার যেভাবে কাজ করে তা ব্রাউজারআউটারের মতো হওয়া উচিত। এছাড়াও আমি এই স্যান্ডবক্সে এখানে কেবল পরীক্ষিত করেছি, এটি সূক্ষ্ম কোডস্যান্ডবক্স.আইও / এস / 25okp1mny কাজ করে , 25kp1mny.codesandbox.io/#/roster/5

— urnoor

Answer 24

আপনি যদি আইআইএসে হোস্টিং করছেন; এটি আমার ওয়েবকনফিগটিতে যুক্ত করা আমার সমস্যার সমাধান করেছে

<httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
    <remove statusCode="500" subStatusCode="100" />
    <remove statusCode="500" subStatusCode="-1" />
    <remove statusCode="404" subStatusCode="-1" />
    <error statusCode="404" path="/" responseMode="ExecuteURL" />
    <error statusCode="500" prefixLanguageFilePath="" path="/error_500.asp" responseMode="ExecuteURL" />
    <error statusCode="500" subStatusCode="100" path="/error_500.asp" responseMode="ExecuteURL" />
</httpErrors>

আপনি অন্য যে কোনও সার্ভারের জন্য অনুরূপ কনফিগারেশন করতে পারেন

Answer 25

যদি কেহ এখানে লারাভেলের সাথে প্রতিক্রিয়া জেএস এসপিএর সমাধান খুঁজছেন। গ্রহণযোগ্য উত্তর হ'ল কেন এ জাতীয় সমস্যা হয় তার সর্বোত্তম ব্যাখ্যা। ইতিমধ্যে ব্যাখ্যা হিসাবে আপনাকে ক্লায়েন্টের পাশ এবং সার্ভার উভয় দিকই কনফিগার করতে হবে। আপনার ফলক টেমপ্লেটে, জেএস বান্ডিল ফাইলটি অন্তর্ভুক্ত করুন, এটির URL facadeমতো ব্যবহার নিশ্চিত করুন

<script src="{{ URL::to('js/user/spa.js') }}"></script>

আপনার রুটগুলিতে, ব্লেড টেম্পলেট যেখানে রয়েছে সেটিকে মূল প্রান্তে নিশ্চিত করুন। উদাহরণ স্বরূপ,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

উপরের অংশটি ব্লেড টেম্পলেটটির মূল সমাপ্তি। এখন একটি routeচ্ছিক রুট যুক্ত করুন,

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

যে সমস্যাটি ঘটে তা হ'ল প্রথমে ফলক টেম্পলেট লোড হয়, তারপরে প্রতিক্রিয়া রাউটার। সুতরাং, আপনি যখন লোড করছেন '/setting-alerts', এটি এইচটিএমএল এবং জেএস লোড করে। আপনি যখন লোড করবেন '/setting-alerts/about', এটি প্রথমে সার্ভারের দিকে লোড হয়। সার্ভারের দিক থেকে, এই অবস্থানটিতে কিছুই নেই, এটি পাওয়া যায়নি। যখন আপনার কাছে optionচ্ছিক রাউটার থাকে, তখন এটি একই পৃষ্ঠাটি লোড করে এবং প্রতিক্রিয়া রাউটারটিও লোড হয়, তারপরে প্রতিক্রিয়াশীল লোডার কোন উপাদানটি প্রদর্শন করবে তা স্থির করে। আশাকরি এটা সাহায্য করবে.

Comments

সার্ভারে কোনও সঠিক ইউআরআই লোড করা কি সার্ভারের প্রতিক্রিয়াতে পুনর্নির্দেশ করা সম্ভব? উদাহরণস্বরূপ, আমি লোড করার সময় /user/{userID}, আমাকে কেবল সর্বজনীন /userএইচটিএমএল ভিউ ফিরিয়ে দিতে হবে, আইডি আনতে হবে এবং এজেএক্স বা অক্ষগুলি ব্যবহার করে এটি কল করতে হবে। ওটা করা কি সম্ভব? তারা কি এসইও বান্ধব?

— রিউইজো

Answer 26

যারা আইআইএস 10 ব্যবহার করছেন, তাদের এই অধিকারটি তৈরি করার জন্য আপনার এটাই করা উচিত। আপনি এটি ব্রাউজারের ইতিহাস ব্যবহার করছেন তা নিশ্চিত হন। রেফারেন্স হিসাবে আমি রাউটিংয়ের জন্য কোডটি দেব, তবে এটি যে বিষয়টি বিবেচনা করে তা নয়, নীচের উপাদান কোডের পরে কী পদক্ষেপটি পরবর্তী পদক্ষেপ:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />    
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

যেহেতু সমস্যাটি হ'ল আইআইএস ক্লায়েন্ট ব্রাউজারগুলির কাছ থেকে অনুরোধ পেয়েছে, এটি ইউআরএলটির ব্যাখ্যা করবে যেমন এটি কোনও পৃষ্ঠা চাইছে, তারপরে কোনও 404 পৃষ্ঠা ফেরত দেয় কারণ কোনও পৃষ্ঠা নেই। নিম্নলিখিতগুলি করুন:

1. আইআইএস খুলুন
2. সার্ভারটি প্রসারিত করুন তারপরে সাইট ফোল্ডারটি খুলুন
3. ওয়েবসাইট / অ্যাপ্লিকেশন ক্লিক করুন
4. ত্রুটি পৃষ্ঠাতে যান
5. তালিকায় 404 ত্রুটি স্থিতি আইটেমটি খুলুন
6. "ত্রুটি প্রতিক্রিয়াতে স্ট্যাটিক ফাইল থেকে সামগ্রী সন্নিবেশ করান" বিকল্পের পরিবর্তে, এটি "এই সাইটে একটি ইউআরএল এক্সিকিউট করুন" এ পরিবর্তন করুন এবং URL এ "/" স্ল্যাশ মান যুক্ত করুন।

এবং এটি এখন সূক্ষ্ম কাজ করবে।

আমি আসা করি এটা সাহায্য করবে. :-)

Answer 27

আমি ওয়েবপ্যাকটি ব্যবহার করছি, আপনার সার্ভার.জেএস ফাইলটিতে সমাধান => আমার একই সমস্যা ছিল

const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, '../dist')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    // res.end();
  });

রিফ্রেশ করার পরে কেন আমার অ্যাপ্লিকেশন রেন্ডার হয় না?

Comments

এটি আমার জন্য এটি করেছে! প্রাথমিকভাবে আমার res.sendFile ছিল (path.JOIN (পাবলিকপথ, "সূচক। Html")); উপরের উদাহরণটির মতো আমি "জয়েন" কে "সমাধান" করে পরিবর্তিত করেছি: রেস.সেন্ডফিল (প্যাথ.সেসলভ ("./ ডিস্ট", "সূচক। Html")); আমি __dirname নিয়েও ঘুরে বেড়াচ্ছিলাম তবে সত্যিই এটি বুঝতে পারি না বা এটি কাজ করতে পারি না তাই আমি ম্যানুয়ালি "./ist" এ অনুলিপি করেছিলাম কারণ এটিই আমার সূচক html থেকে পরিবেশন করা হয়েছে। আমি এটিকে আগের মতোই ঘোষণা করেছিলাম: অ্যাপ.ইউজ (এক্সপ্রেস.স্ট্যাটিক ("। / ডিস্ট"));

— লগিক্সপ্লেয়ার

Answer 28

ব্যবহার করা HashRouterসঙ্গে আমার জন্য কাজ Redux এছাড়াও, সহজভাবে প্রতিস্থাপন করুন:

import {
  Router //replace Router
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
    <Provider store={Store}>
        <Router history={history}> //replace here saying Router
            <Layout/>
        </Router>
    </Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();

প্রতি:

import {
  HashRouter //replaced with HashRouter
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
    <Provider store={Store}>
        <HashRouter history={history}> //replaced with HashRouter
            <Layout/>
        </HashRouter>
    </Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();

Answer 29

আমারও একই সমস্যা ছিল এবং এই সমাধানটি আমাদের পক্ষে কাজ করে ..

পটভূমি:

আমরা একই সার্ভারে একাধিক অ্যাপ হোস্ট করছি। আমরা যখন সার্ফকে রিফ্রেশ করব তখন সেই নির্দিষ্ট অ্যাপের জন্য ডিস ফোল্ডারে আমাদের সূচীটি কোথায় সন্ধান করতে হবে তা বুঝতে পারা যায় না। উপরের লিঙ্কটি আপনাকে কীভাবে আমাদের জন্য কাজ করেছে তা নিয়ে যাবে ... আশা করি এটি আমাদের সহায়তা করবে, কারণ আমরা আমাদের প্রয়োজনীয়তার সমাধান বের করতে বেশ কয়েক ঘন্টা ব্যয় করেছি।

আমরা ব্যবহার করছি:

package.json

"dependencies": {
"babel-polyfill": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-persist": "^4.6.0",
"redux-thunk": "^2.2.0",
"webpack": "^2.4.1"
}

আমার ওয়েবপ্যাক.কনফিগ.জেএস

webpack.config.js

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelPolyfill = require('babel-polyfill');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/views/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    'babel-polyfill', './app/index.js'
  ],
  output: {
    path: __dirname + '/dist/your_app_name_here',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query : {
          presets : ["env", "react", "stage-1"]
      },
      exclude: /node_modules/
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
}

আমার সূচক.জেএস

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from './Routes'
import { Provider } from 'react-redux'
import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import configureStore from './store/configureStore'
import { syncHistoryWithStore } from 'react-router-redux'
import { persistStore } from 'redux-persist'

const store = configureStore();

const browserHistory = useRouterHistory(createHistory) ({
  basename: '/your_app_name_here'
})
const history = syncHistoryWithStore(browserHistory, store)

persistStore(store, {blacklist: ['routing']}, () => {
  console.log('rehydration complete')
})
// persistStore(store).purge()


ReactDOM.render(
    <Provider store={store}>
      <div>
        <Routes history={history} />
      </div>
    </Provider>,
  document.getElementById('mount')
)

আমার app.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));
// app.use(express.static(__dirname + '/app/assets'));
app.set('views', __dirname + '/dist/your_app_name_here');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/*', function (req, res) {
    res.render('index');
});

app.listen(8081, function () {
  console.log('MD listening on port 8081!');
});

Answer 30

আমি এটি পরিচালনা করার এই উপায় পছন্দ করি। এই সমস্যা থেকে পরিত্রাণ পেতে সার্ভার সাইডে আপনার এসএপেজ রুট / * যুক্ত করার চেষ্টা করুন ।

আমি এই পদ্ধতির সাথে গিয়েছিলাম কারণ এমনকি দেশীয় এইচটিএমএল 5 ইতিহাস এপিআই পৃষ্ঠা রিফ্রেশে সঠিক পুনঃনির্দেশকে সমর্থন করে না (যতদূর আমি জানি)।

দ্রষ্টব্য: নির্বাচিত উত্তর ইতিমধ্যে এটি সম্বোধন করেছে তবে আমি আরও নির্দিষ্ট হওয়ার চেষ্টা করছি।

এক্সপ্রেস রুট

পরীক্ষিত এবং কেবল এটি ভাগ করতে চেয়েছিলেন।

আশা করি এটা সাহায্য করবে.