javascript - प्रतिक्रिया-राउटर यूआरएल काम नहीं करते हैं जब ताज़ा या मैन्युअल रूप से लिखते हैं




url reactjs (20)

जोशुआ डाइक के उत्तर के बारे में अधिक जानकारी जोड़ना ।

यदि आप Firebase का उपयोग कर रहे हैं और रूट रूट और उप-निर्देशिका मार्ग दोनों का उपयोग करना चाहते हैं, तो आपको निम्नलिखित कोड अपने में जोड़ना होगा firebase.json :

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

उदाहरण:

आप क्लाइंट के लिए वेबसाइट बना रहे हैं। आप चाहते हैं कि वेबसाइट का मालिक https://your.domain.com/management में जानकारी जोड़े , जबकि वेबसाइट के उपयोगकर्ता https://your.domain.com पर नेविगेट करेंगे ।

इस स्थिति में आपकी firebase.json फ़ाइल इस तरह दिखाई देगी:

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

मैं रिएक्ट-राउटर का उपयोग कर रहा हूं और लिंक बटन पर क्लिक करने के दौरान यह ठीक काम करता है, लेकिन जब मैं अपने वेबपेज को रिफ्रेश करता हूं तो यह लोड नहीं होता है जो मुझे चाहिए।

उदाहरण के लिए, मैं localhost/joblist और सबकुछ ठीक है क्योंकि मैं एक लिंक दबाकर यहां पहुंची हूं। लेकिन अगर मुझे मिले वेबपेज को रीफ्रेश किया जाए:

Cannot GET /joblist

डिफ़ॉल्ट रूप से, यह इस तरह काम नहीं करता था। शुरू में मेरे पास localhost/#/ और localhost/#/joblist रूप में मेरा यूआरएल था और उन्होंने पूरी तरह से ठीक काम किया। लेकिन मुझे इस तरह का URL पसंद नहीं है, इसलिए उस # को मिटाने की कोशिश कर रहा हूं, मैंने लिखा है:

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

यह समस्या localhost/ साथ नहीं होती है, यह हमेशा वही लौटता है जो मैं चाहता हूं।

EDIT: यह ऐप सिंगल-पेज है, इसलिए /joblist को किसी भी सर्वर से कुछ भी पूछने की आवश्यकता नहीं है।

EDIT2: मेरा पूरा राउटर।

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);
});

जैसा कि मैं उपयोग कर रहा हूँ .नेट कोर MVC कुछ इस तरह से मुझे मदद मिली:

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

मूल रूप से एमवीसी के पक्ष में, मेल नहीं खाने वाले सभी मार्ग Home/Index इसमें निर्दिष्ट किए गए अनुसार गिर जाएंगे startup.cs । इसके अंदर Index मूल अनुरोध url प्राप्त करना और जहाँ भी आवश्यक हो, पास करना संभव है।

startup.cs

    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");
        }
   }

मान लें कि आपके पास निम्न होम रूट परिभाषा है

<Route exact path="/" render={routeProps => (
   <Home routeProps={routeProps}/>
)}/>

{/*optional catch-all router */}
<Route render={routeProps => (
       <div><h4>404 not found</h4></div>
)}/>

अपने होम घटक पर, आप ComponentWillMount इवेंट में अनुरोध को रोक सकते हैं,

const searchPath = this.props.routeProps.location.search;

if (searchPath){
    this.props.routeProps.history.push("/" + searchPath.replace("?",""));
}
else{
    /*.... originally Home event */
}

अब, url पर कॉल / जॉब लिस्ट करने के बजाय, आप जॉबलिस्ट / / का अनुरोध कर सकते हैं, और कंपोनेंट ऑटो / जॉबलिस्ट के अनुरोध को ऑटो रीडायरेक्ट करेगा (पथ में अतिरिक्त प्रश्न चिह्न पर ध्यान दें)


मुझे इसे संभालने का यह तरीका पसंद है। जोड़ने का प्रयास करें: इस समस्या से छुटकारा पाने के लिए सर्वर साइड पर yourSPAPageRoute / *

मैं इस दृष्टिकोण के साथ गया, क्योंकि यहां तक ​​कि देशी एचटीएमएल 5 इतिहास एपीआई पेज रिफ्रेश (जहां तक ​​मुझे पता है) पर सही पुनर्निर्देशन का समर्थन नहीं करता है।

नोट: चयनित उत्तर ने पहले ही इसे संबोधित कर दिया है लेकिन मैं और अधिक विशिष्ट होने की कोशिश कर रहा हूं।

एक्सप्रेस रूट

परीक्षण किया गया और बस इसे साझा करना चाहता था।

आशा है ये मदद करेगा।


यदि आप IIS में होस्ट कर रहे हैं; इसे मेरे वेबकॉन्फ़ में जोड़ने से मेरी समस्या हल हो गई

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

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

आप किसी अन्य सर्वर के लिए समान कॉन्फ़िगरेशन बना सकते हैं


यदि आप बैकएंड में एक्सप्रेस या कुछ अन्य फ्रेमवर्क का उपयोग कर रहे हैं, तो आप नीचे दिए गए समान कॉन्फ़िगरेशन को जोड़ सकते हैं और कॉन्फ़िगरेशन में वेबपैक सार्वजनिक पथ की जांच कर सकते हैं, यदि आप BrowserRouter का उपयोग कर रहे हैं तो भी इसे फिर से लोड करना चाहिए।

    <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>

अपने index.html head , निम्नलिखित जोड़ें:

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

तब जब webpack देव सर्वर के साथ चल रहा है इस कमांड का उपयोग करें।

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

--history-api-fallback महत्वपूर्ण हिस्सा है


आप अपना htaccess बदल सकते हैं और इसे सम्मिलित कर सकते हैं:

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

<HashRouter>
  <App/>
</HashRouter>

मैं react: "^15.3.2" का उपयोग कर रहा हूं react: "^15.3.2" , react-router: "^3.0.0" , history: "^4.3.0" ,


इसे webpack.congif.js जोड़ें

devServer: {
      historyApiFallback: true
  }

नीचे दिए गए कोड के साथ सार्वजनिक फ़ोल्डर के अंदर ".htaccess" फ़ाइल को जोड़ने का प्रयास करें।

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

RewriteRule ^ /index.html [L]  

मैंने अपने एसपीए के लिए प्रतिक्रिया राउटर (अपाचे) के साथ समाधान पाया। बस .htaccess में जोड़ें

<?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>

स्रोत: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042


मैंने अभी-अभी एक वेबसाइट बनाने के लिए create-react-app का उपयोग किया था और यहाँ प्रस्तुत एक ही मुद्दा था। मैं react-router-dom पैकेज से BrowserRouting उपयोग करता BrowserRouting । मैं एक नगनेक्स सर्वर पर चल रहा हूं और मेरे लिए इसे हल करने के लिए /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]

यह स्वयं फेसबुक द्वारा सुझाया गया समाधान भी लगता है और here पाया जा सकता here


यदि आप फायरबेस का उपयोग कर रहे हैं, तो आपको यह सुनिश्चित करना होगा कि आपको अपने ऐप के रूट में (होस्टिंग अनुभाग में) अपने फायरबेस में फिर से लिखना संपत्ति मिल गई है।

उदाहरण के लिए:

<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://firebase.google.com/docs/hosting/full-config#rewrites

फायरबेस सीएलआई: "सिंगल-पेज ऐप के रूप में कॉन्फ़िगर करें (/ urex.html पर सभी यूआरएल को फिर से लिखें)"


यदि आपके पास अपने index.html में कोई कमी है, तो सुनिश्चित करें कि आपकी index.html फ़ाइल में यह आपके पास है:

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

यह प्रोजेक्ट से प्रोजेक्ट में भिन्न हो सकता है।


यहां जवाब सभी बेहद मददगार हैं, जो मेरे लिए काम करता है वह मार्गों की अपेक्षा करने के लिए मेरे वेबपैक सर्वर को कॉन्फ़िगर कर रहा था।

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

HistoryApiFallback ने मेरे लिए इस मुद्दे को तय किया है। अब रूटिंग सही तरीके से काम करती है और मैं पेज को सीधे URL में रीफ्रेश कर सकता हूं। अपने नोड सर्वर पर काम के बारे में चिंता करने की कोई जरूरत नहीं है। यह जवाब स्पष्ट रूप से केवल तभी काम करता है जब आप वेबपैक का उपयोग कर रहे हों।

EDIT: अधिक विस्तृत कारण के लिए मेरा उत्तर यहाँ देखें कि यह क्यों आवश्यक है: https://.com/a/37622953/5217568


राउटर को दो अलग-अलग तरीकों से बुलाया जा सकता है, यह इस बात पर निर्भर करता है कि नेविगेशन क्लाइंट पर है या सर्वर पर। आपने इसे क्लाइंट-साइड ऑपरेशन के लिए कॉन्फ़िगर किया है। कुंजी पैरामीटर रन विधि , स्थान के लिए दूसरा है।

जब आप रिएक्ट राउटर लिंक घटक का उपयोग करते हैं, तो यह ब्राउज़र नेविगेशन को ब्लॉक करता है और एक क्लाइंट-साइड नेविगेशन करने के लिए ट्रांज़िशनटॉल्स को कॉल करता है। आप HistoryLocation का उपयोग कर रहे हैं, इसलिए यह पता बार में नए URL का अनुकरण करके नेविगेशन के भ्रम को पूरा करने के लिए HTML5 इतिहास एपीआई का उपयोग करता है। यदि आप पुराने ब्राउज़र का उपयोग कर रहे हैं, तो यह काम नहीं करेगा। आपको HashLocation घटक का उपयोग करने की आवश्यकता होगी।

जब आप ताज़ा करते हैं, तो आप सभी प्रतिक्रिया और प्रतिक्रिया रूटर कोड को बायपास कर देते हैं। सर्वर को /joblist लिए अनुरोध /joblist और इसे कुछ वापस करना होगा। सर्वर पर आपको उस पथ को पारित करने की आवश्यकता होती है जो सही दृश्य को प्रस्तुत करने के लिए run विधि के लिए अनुरोध किया गया था। आप एक ही रूट मैप का उपयोग कर सकते हैं, लेकिन आपको शायद Router.run को एक अलग कॉल की आवश्यकता होगी। जैसा कि चार्ल्स बताते हैं, आप इसे संभालने के लिए URL पुनर्लेखन का उपयोग कर सकते हैं। एक अन्य विकल्प सभी अनुरोधों को संभालने और स्थान तर्क के रूप में पथ मान को पारित करने के लिए एक नोड.जेएस सर्वर का उपयोग करना है।

उदाहरण के लिए, यह इस तरह दिख सकता है:

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 लिए पारित किया जा रहा है। ऐसा करने के लिए, आपको एक सर्वर-साइड व्यू इंजन की आवश्यकता होगी जिसे आप प्रदान किए गए HTML को पास कर सकते हैं। renderToString का उपयोग renderToString और सर्वर पर रिएक्ट चलाने में कई अन्य विचार हैं। एक बार जब पृष्ठ सर्वर पर प्रदान किया जाता है, जब आपका ऐप क्लाइंट में लोड होता है, तो यह फिर से रेंडर करेगा, सर्वर-साइड को HTML को आवश्यकतानुसार अपडेट करते हुए।


मामले में, कोई भी यहां लारवेल के साथ रिएक्ट जेएस एसपीए पर समाधान की तलाश कर रहा है। स्वीकृत जवाब इस तरह की समस्याएं क्यों होती हैं इसका सबसे अच्छा विवरण है। जैसा कि पहले ही समझाया गया है कि आपको क्लाइंट साइड और सर्वर साइड दोनों को कॉन्फ़िगर करना होगा। अपने ब्लेड टेम्पलेट में, js बंडल फ़ाइल शामिल करें URL facade , इस तरह का उपयोग करना सुनिश्चित करें

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

अपने मार्गों में, यह सुनिश्चित करें कि इसे मुख्य समापन बिंदु पर जोड़ें जहां ब्लेड टेम्पलेट है। उदाहरण के लिए,

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

ब्लेड टेम्पलेट के लिए मुख्य समापन बिंदु ऊपर है। अब एक वैकल्पिक मार्ग भी जोड़ें,

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

समस्या यह है कि पहले ब्लेड टेम्पलेट लोड किया जाता है, फिर प्रतिक्रिया राउटर। इसलिए, जब आप लोड कर रहे हैं '/setting-alerts' , तो यह html और js लोड करता है। लेकिन जब आप लोड करते हैं '/setting-alerts/about' , तो यह पहले सर्वर साइड पर लोड होता है। चूंकि सर्वर की ओर, इस स्थान पर कुछ भी नहीं है, यह रिटर्न नहीं मिला। जब आपके पास वह वैकल्पिक राउटर होता है, तो वह उसी पेज को लोड करता है और राउटर को भी लोड किया जाता है, फिर रियेक्टर लोड करता है कि किस घटक को दिखाना है। उम्मीद है की यह मदद करेगा।


प्रतिक्रिया रूटर V4 उपयोगकर्ताओं के लिए:

यदि आप अन्य उत्तरों में वर्णित हैश इतिहास तकनीक द्वारा इस समस्या को हल करने का प्रयास करते हैं, तो ध्यान दें

<Router history={hashHistory} >

V4 में काम नहीं करता है, कृपया इसके बजाय HashRouter उपयोग करें:

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

संदर्भ: HashRouter


यदि आप AWS स्टेटिक S3 होस्टिंग और CloudFront के माध्यम से एक प्रतिक्रिया ऐप होस्ट कर रहे हैं

इस समस्या को CloudFront ने 403 Access Denied संदेश के साथ जवाब देते हुए स्वयं प्रस्तुत किया क्योंकि यह मेरे S3 फ़ोल्डर में मौजूद होने के लिए / कुछ / अन्य / पथ की अपेक्षा करता था, लेकिन यह पथ केवल प्रतिक्रिया-राउटर के साथ React के रूटिंग में आंतरिक रूप से मौजूद है।

समाधान वितरण पृष्ठ त्रुटि नियम स्थापित करना था। CloudFront सेटिंग्स पर जाएं और अपना वितरण चुनें। अगला "त्रुटि पृष्ठ" टैब पर जाएं। "कस्टम त्रुटि प्रतिक्रिया बनाएँ" पर क्लिक करें और 403 के लिए एक प्रविष्टि जोड़ें क्योंकि यह त्रुटि स्थिति कोड हमें मिलता है। प्रतिक्रिया पृष्ठ पथ को /index.html और स्थिति कोड को 200 पर सेट करें। अंतिम परिणाम मुझे इसकी सरलता से चकित करता है। इंडेक्स पेज को परोसा जाता है, लेकिन URL ब्राउज़र में संरक्षित होता है, इसलिए एक बार जब एप्लिकेशन लोड हो जाता है, तो यह URL पथ का पता लगाता है और वांछित मार्ग पर नेविगेट करता है।

त्रुटि पृष्ठ 403 नियम


यदि आप Create React App का उपयोग कर रहे हैं:

कई प्रमुख होस्टिंग प्लेटफ़ॉर्म के समाधान के साथ इस समस्या का एक बड़ा चलना है, जिसे आप HERE पर रिएक्ट ऐप बनाएं पेज पर पा सकते हैं। उदाहरण के लिए, मैं अपने फ्रंटएंड कोड के लिए रिएक्ट राउटर v4 और Netlify का उपयोग करता हूं। मेरे सभी सार्वजनिक फ़ोल्डर ("_redirects") में 1 फ़ाइल जोड़ रहा था और उस फ़ाइल में कोड की एक पंक्ति:

/*  /index.html  200

अब मेरी वेबसाइट ठीक से mysite.com/pricing जैसे रास्तों को प्रस्तुत करती है जब ब्राउज़र में दर्ज किया जाता है या जब कोई ताज़ा ताज़ा करता है।





react-router