React-router url-lar yangilash yoki qo'lda yozishda ishlamaydi

_{Qabul qilingan javobga berilgan izohlarga va bu savolning umumiy xususiyatiga ('ishlamaydi') qarab, men bu yerdagi masalalar bo'yicha umumiy tushuntirishlar uchun yaxshi joy bo'lishi mumkin deb o'yladim. Shunday qilib, bu javob OPning maxsus foydalanish holati bo'yicha ma'lumot/ishlab chiqish sifatida mo'ljallangan. Iltimos, sabr qiling.}

Server tomoni va mijoz tomoni

Buni tushunish kerak bo'lgan birinchi muhim narsa shundaki, hozirda URL talqin qilinadigan ikkita joy mavjud bo'lsa, "eski kunlarda" faqat 1 ta joy mavjud edi. Ilgari, hayot oddiy bo'lganida, ba'zi foydalanuvchi serverga http://example.com/about so'rovini yubordi, u URLning yo'l qismini tekshirdi, foydalanuvchi haqida sahifani so'raganini aniqladi va keyin o'sha sahifani qaytarib yubordi.

React-Router tomonidan taqdim etilgan mijoz tomonidan marshrutlash bilan ishlar unchalik oson emas. Avvaliga mijozda hali JS kodi yuklanmagan. Shunday qilib, birinchi so'rov har doim serverga bo'ladi. Keyin React va React Router va hokazolarni yuklash uchun kerakli skript teglarini o'z ichiga olgan sahifani qaytaradi. Faqat shu skriptlar yuklangandan keyingina 2-bosqich boshlanadi. 2-bosqichda foydalanuvchi “Biz haqimizda” navigatsiya havolasini bosganida, masalan, URL faqat mahalliy ga http://example.com/about ga oʻzgartiriladi (Tarix API), lekin serverga hech qanday so'rov yuborilmadi. Buning o'rniga, React Router mijoz tomonida o'z ishini qiladi, qaysi React ko'rinishini ko'rsatishni aniqlaydi va uni taqdim etadi. Haqida sahifangiz REST qo'ng'iroqlarini amalga oshirishga hojat yo'q deb hisoblasangiz, u allaqachon bajarilgan. Siz “Uy”dan “Biz haqimizda”ga hech qanday server soʻrovisiz oʻtdingiz.

Demak, havolani bosganingizda, sahifa yangilanishiga olib kelmasdan manzil satridagi URL manzilini boshqaradigan ba'zi Javascript ishlaydi, bu esa o'z navbatida React Router-ni mijozda sahifaga o'tishni amalga oshirishiga olib keladi. -tomoni.

Ammo endi manzil satriga URL-manzilni nusxa ko'chiring va uni do'stingizga elektron pochta orqali yuborsangiz nima bo'lishini ko'rib chiqing. Do'stingiz hali veb-saytingizni yuklamagan. Boshqacha qilib aytganda, u hali ham 1-bosqichda. Uning mashinasida hali hech qanday React Router ishlamaydi. Shunday qilib, uning brauzeri http://example.com/about ga server so'rovi yuboradi.

Va bu erda sizning muammolaringiz boshlanadi. Hozirgacha serveringizning veb-rootiga statik HTMLni joylashtirish bilan qutulishingiz mumkin edi. Lekin bu serverdan so'ralganda boshqa barcha URL manzillar uchun 404 xatolik beradi. Xuddi shu URL manzillar mijoz tomonida yaxshi ishlaydi, chunki u yerda React Router siz uchun marshrutlashni amalga oshiradi, lekin serveringizga tushunarli qilmasangiz, ular server tomonida ishlamay qoladi. ular.

Server va mijoz tomonidan marshrutlashni birlashtirish

Agar siz http://example.com/about URL manzili server va mijoz tomonida ishlashini istasangiz, uning uchun server va mijoz tomonida marshrutlarni o'rnatishingiz kerak. Mantiqiy, to'g'rimi?

Va bu erda sizning tanlovingiz boshlanadi. Yechimlar muammoni butunlay chetlab o'tishdan tortib, HTML yuklash faylini qaytaradigan barcha yo'l orqali server va mijoz bir xil JS kodini boshqaradigan to'liq izomorf yondashuvgacha bo'lgan masofani o'z ichiga oladi.

.

Muammoni butunlay chetlab o'tish: Xesh tarixi

Xesh tarixi bilan oʻrniga Brauzer tarixini o'rgansangiz, "haqida" sahifasi uchun URL manzilingiz quyidagicha ko'rinadi: http://example.com/#/about Xesh (#) belgisidan keyingi qism serverga yuborilmaydi. Shunday qilib, server faqat http://example.com/ ni ko'radi va indeks sahifasini kutilganidek yuboradi. React-Router #/about qismini oladi va to'g'ri sahifani ko'rsatadi.

Kasalliklar:

• "xunuk" URL manzillar
• Ushbu yondashuv bilan server tomonida ko'rsatish mumkin emas. Qidiruv tizimini optimallashtirishga (SEO) kelsak, sizning veb-saytingiz deyarli hech qanday tarkibga ega bo'lmagan bitta sahifadan iborat.

.

Hammasini ushlash

Ushbu yondashuv bilan siz Brauzer tarixidan foydalanasiz, lekin shunchaki serverda /* ni index.html ga yuboradigan hamma narsani o'rnatasiz, bu sizga hash tarixi bilan bir xil vaziyatni samarali ta'minlaydi. Biroq, sizda toza URL manzillar bor va siz foydalanuvchining barcha sevimlilarini bekor qilmasdan keyinroq ushbu sxemani yaxshilashingiz mumkin.

Kasalliklar:

• O'rnatish yanada murakkab
• Hali ham yaxshi SEO yo'q

.

Gibrid

Gibrid yondashuvda siz ma'lum marshrutlar uchun maxsus skriptlarni qo'shish orqali barchani qamrab oladigan stsenariyni kengaytirasiz. Saytingizning eng muhim sahifalarini kontent bilan qaytarish uchun oddiy PHP skriptlarini yaratishingiz mumkin, shuning uchun Googlebot hech bo'lmaganda sahifangizda nima borligini ko'rishi mumkin.

Kasalliklar:

• O'rnatish yanada murakkabroq
• Siz maxsus muomala qilgan marshrutlar uchun faqat yaxshi SEO
• Server va mijozda kontentni ko'rsatish uchun kodni takrorlash

.

Izomorf

Agar biz JS kodini ikkala uchida ham bir xil ishga tushirishimiz uchun server sifatida Node JS-dan foydalansak-chi? Endi bizda barcha marshrutlarimiz bitta reaktsion-router konfiguratsiyasida aniqlangan va biz renderlash kodimizni takrorlashimiz shart emas. Bu, ta'bir joiz bo'lsa, "muqaddas kosa". Server, agar mijozda sahifaga o'tish sodir bo'lgan bo'lsa, xuddi shunday belgilashni yuboradi. Ushbu yechim SEO nuqtai nazaridan maqbuldir.

Kasalliklar:

• Server JSni ishga tushirish kerak (qodir boʻlishi). Men Java i.c.w bilan tajriba o'tkazdim. Nashorn, lekin bu men uchun ishlamayapti. Amalda, bu asosan Node JS serveridan foydalanish kerakligini anglatadi.
• Ko'pgina murakkab ekologik muammolar (server tomonida window dan foydalanish va hokazo)
• Qattiq o'rganish egri chizig'i

.

Qaysi birini ishlatishim kerak?

O'zingizdan qutulishingiz mumkin bo'lgan birini tanlang. Shaxsan men o'ylaymanki, hamma narsani o'rnatish juda oddiy, shuning uchun bu mening minimal bo'ladi. Ushbu sozlash vaqt o'tishi bilan narsalarni yaxshilashga imkon beradi. Agar siz allaqachon server platformasi sifatida Node JS dan foydalanayotgan bo'lsangiz, men albatta izomorf ilova qilishni tekshirib ko'raman. Ha, avvaliga bu qiyin, biroq uni o‘zlashtirganingizdan so‘ng, bu muammoning juda oqlangan yechimidir.

Shunday qilib, men uchun bu hal qiluvchi omil bo'ladi. Agar mening serverim Node JS da ishlayotgan bo'lsa, men izomorf bo'lardim; aks holda, men Catch-all yechimga borardim va vaqt o'tishi bilan va SEO talablari talab qilganda uni kengaytiraman (Gibrid yechim).

Agar siz React bilan izomorf (universal deb ham ataladi) renderlash haqida ko'proq ma'lumotga ega bo'lishni istasangiz, ushbu mavzu bo'yicha bir nechta yaxshi darsliklar mavjud:

• Izomorf ilovalar bilan kelajakka munosabat bildiring
• ReactJS-da izomorf ilovalar yaratishning azobi va quvonchi
• Qanday qilib tugun + reaksiya izomorfik JavaScript-ni tatbiq etish kerak va bu nima uchun muhim

Bundan tashqari, boshlash uchun men bir nechta boshlang'ich to'plamlarni ko'rib chiqishni maslahat beraman. Texnologik stek uchun tanlovlaringizga mos keladiganini tanlang (esda tuting, React MVC-dagi faqat V, to'liq ilova yaratish uchun sizga ko'proq narsalar kerak bo'ladi). Facebookning o'zi tomonidan e'lon qilinganini ko'rib chiqishdan boshlang:

• React ilovasini yaratish

Yoki jamiyat tomonidan ko'pchilikdan birini tanlang. Endi ularning barchasini indekslashga harakat qiladigan yaxshi sayt mavjud:

• Mukammal React starter loyihangizni tanlang

Men bulardan boshladim:

• React Isomorphic Starterkit
• React Redux universal misol

Hozirda men yuqoridagi ikkita boshlang'ich to'plamdan ilhomlangan universal renderlashning uyda ishlab chiqarilgan versiyasidan foydalanmoqdaman, ammo ular endi eskirgan.

Izlanishingizga omad tilaymiz!

WITH inserted_id AS (
  INSERT INTO tbl1 (col1)
  VALUES ('foo') RETURNING id
)

INSERT INTO tbl2 (other_id) 
VALUES ((select id from inserted_id));

Bu erda berilgan javoblar juda foydali, men uchun ishlagan narsa mening Webpack serverimni marshrutlarni kutish uchun sozlash edi.

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

HistoryApiFallback men uchun bu muammoni hal qildi. Endi marshrutlash to'g'ri ishlaydi va men sahifani yangilashim yoki to'g'ridan-to'g'ri URL-manzilni kiritishim mumkin. Tugun serveringizdagi ishlash haqida tashvishlanishga hojat yo'q. Bu javob faqat veb-paketdan foydalansangiz ishlaydi.

EDIT: Bu nima uchun zarurligi haqida batafsilroq sababni bilish uchun javobimni bu yerda ko'ring: https://stackoverflow.com/a/37622953/5217568

.htaccess faylingizni oʻzgartirishingiz va buni kiritishingiz mumkin:

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

Men react: "^16.12.0" va react-router: "^5.1.2" dan foydalanaman.

React Router V4 foydalanuvchilari uchun:

Agar siz ushbu muammoni boshqa javoblarda aytib o'tilgan "Xesh History" usuli bilan hal qilishga harakat qilsangiz, e'tibor bering

<Router history={hashHistory} >

V4 da ishlamaydi, o‘rniga HashRouter dan foydalaning:

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

<HashRouter>
  <App/>
</HashRouter>

Malumot: HashRouter

Men hozirda veb-sayt yaratish uchun create-react-app-dan foydalanganman va bu erda xuddi shu muammoni ko'rsatdim. Men react-router-dom paketidagi BrowserRouting dan foydalanaman. Men Nginx serverida ishlayapman va men uchun buni hal qilgan narsa /etc/nginx/yourconfig.conf ga quyidagilarni qo'shdi.

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

Bu Appache ishlayotgan bo'lsangiz, .htaccess ga quyidagilarni qo'shishga mos keladi

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

Bu, shuningdek, Facebook tomonidan taklif qilingan yechim kabi ko'rinadi va uni bu yerda

index.html head ga quyidagilarni qo'shing:

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

Keyin webpack dev server bilan ishlaganda ushbu buyruqdan foydalaning.

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

--history-api-fallback muhim qismdir

Navigatsiya mijozda yoki serverda sodir bo'lishiga qarab, yo'riqnoma ikki xil usulda chaqirilishi mumkin. Siz uni mijoz tomonida ishlash uchun sozlagansiz. Asosiy parametr ishlash usuli uchun ikkinchisi, joylashuv .

React Router Link komponentidan foydalansangiz, u brauzer navigatsiyasini bloklaydi va mijoz tomonida navigatsiya qilish uchun transitionTo ni chaqiradi. Siz HistoryLocation-dan foydalanmoqdasiz, shuning uchun u manzil satrida yangi URL-manzilni simulyatsiya qilish orqali navigatsiya illyuziyasini yakunlash uchun HTML5 tarixi API-dan foydalanadi. Agar eski brauzerlardan foydalansangiz, bu ishlamaydi. HashLocation komponentidan foydalanishingiz kerak bo'ladi.

Yangilashni bosganingizda, siz barcha React va React Router kodlarini chetlab o'tasiz. Server /joblist so'rovini oladi va u biror narsani qaytarishi kerak. Serverda to'g'ri ko'rinishni ko'rsatishi uchun run usuliga so'ralgan yo'lni o'tkazishingiz kerak. Xuddi shu marshrut xaritasidan foydalanishingiz mumkin, lekin Router.run raqamiga boshqa qo‘ng‘iroq qilish kerak bo‘lishi mumkin. Charlz ta'kidlaganidek, buni hal qilish uchun URLni qayta yozishdan foydalanishingiz mumkin. Yana bir variant - barcha so'rovlarni bajarish uchun node.js serveridan foydalanish va joylashuv argumenti sifatida yo'l qiymatini o'tkazish.

Masalan, ekspressda u quyidagicha ko'rinishi mumkin:

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

E'tibor bering, so'rov yo'li run ga uzatilmoqda. Buni amalga oshirish uchun sizda ko'rsatilgan HTMLni uzatishingiz mumkin bo'lgan server tomondan ko'rish mexanizmi bo'lishi kerak. renderToString dan foydalanish va serverda Reactni ishga tushirishda bir qator boshqa fikrlar mavjud. Sahifa serverda ko'rsatilgandan so'ng, ilovangiz mijozga yuklanganda, kerak bo'lganda server tomonida ko'rsatilgan HTMLni yangilab, yana ko'rsatiladi.

Agar siz React ilovasini yaratishdan foydalanayotgan bo'lsangiz:

Ko'pgina yirik hosting platformalari uchun yechimlar bilan bu muammoni hal qilish uchun ajoyib yurish bor, siz ularni topishingiz mumkin SHU YERDA. Masalan, men frontend kodim uchun React Router v4 va Netlify-dan foydalanaman. Buning uchun mening umumiy jildga ("_redirects") 1 ta fayl va ushbu fayldagi bitta kod qatori qo'shildi:

/*  /index.html  200

Endi mening veb-saytim brauzerga kiritilganda yoki kimdir yangilashni bosganida mysite.com/pricing kabi yo'llarni to'g'ri ko'rsatadi.

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

Manba: https://gist.github.com/alexsasharegan/173878f9463878f9b

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

Agar siz ilovangizni pastki katalogga joylashtirayotgan bo'lsangiz, unga kirish mumkin bo'ladi, masalan. https://myapp.com/the-app orqali siz tez orada yana bir borligini sezasiz. nashr. Yangi marshrutga har bir bosish URL manzilini https://myapp.com/route-abcga o‘zgartiradi. a> – qayta yuklangandan keyin yana buziladi. Ammo buning uchun oddiy tuzatish mavjud:

From now on, each Route like /contacts will result in an URL like http://myapp.com/the-app/contacts.

HashRouter dan foydalanish men uchun Redux bilan ham ishladi, shunchaki almashtiring:

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

to:

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

Agar siz create-react-app buyrug'idan foydalansangiz,

reaksiya ilovasini yaratish uchun brauzerda React SPA ishlab chiqarishni to'g'ri ishga tushirish uchun package.json faylida bitta o'zgarish bo'lishi kerak. package.json faylini oching va unga quyidagi kod segmentini qo'shing,

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

Bu erda eng muhim qism --history-api-fallback tarixi API qo'ng'iroqlarini faollashtirishdir.

Ba'zan siz Spring yoki boshqa API-dan foydalansangiz, 404 xatosiga duch kelasiz. Shunday qilib, bunday vaziyatda react-router tomonidan ishlov berish uchun har qanday so'rovni (siz xohlagan) index.html fayliga yo'naltirish uchun orqa tomonda kontroller bo'lishi kerak. Quyida bahor yordamida yozilgan boshqaruvchi misolini ko'rsating.

@Controller
public class ForwardingController {
    @RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
    public String forward(HttpServletRequest httpServletRequest) {
        return "forward:/";
    }
}

Masalan, agar biz API REST so'nggi nuqtasini abc (http://localhost:8080/abc/**) sifatida olsak, ushbu so'nggi nuqtaga keladigan har qanday so'rov ilovani (index.html fayli) reaktsiyaga yo'naltiradi va reaksiya- Router bu so'zlarni boshqaradi.

Agar kimdir bu erda Laravel bilan React JS SPA bo'yicha yechim izlayotgan bo'lsa. Qabul qilingan javob bu kabi muammolar nima uchun yuzaga kelishini eng yaxshi tushuntirishdir. Yuqorida aytib o'tilganidek, siz mijoz tomonini ham, server tomonini ham sozlashingiz kerak. Blade shabloningizga js to'plami faylini qo'shing, shunga o'xshash URL facade dan foydalaning.

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

Marshrutlaringizda buni pichoq shablonining asosiy so'nggi nuqtasiga qo'shganingizga ishonch hosil qiling. Masalan,

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

Yuqoridagilar pichoq shablonining asosiy yakuniy nuqtasidir. Endi ixtiyoriy marshrutni ham qo'shing,

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

Muammo shundaki, avval pichoq shabloni yuklanadi, so'ngra reaktsion router. Shunday qilib, siz '/setting-alerts' ni yuklayotganingizda, u html va js ni yuklaydi. Lekin '/setting-alerts/about' ni yuklaganingizda, u avval server tomonida yuklanadi. Server tomonida bu joyda hech narsa yo'qligi sababli, u topilmadi. Agar sizda ixtiyoriy yo'riqnoma mavjud bo'lsa, u o'sha sahifani yuklaydi va reaktiv yo'riqnoma ham yuklanadi, keyin reaksiya yuklovchi qaysi komponentni ko'rsatishni hal qiladi. Umid qilamanki, bu yordam beradi.

Men .Net Core MVC dan foydalanar ekanman, menga shunday narsa yordam berdi:

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

Asosan MVC tomonida, mos kelmaydigan barcha marshrutlar startup.cs da ko'rsatilgandek Home/Index ga tushadi. Index ichida asl so'rov url-ni olish va kerakli joyga yuborish mumkin.

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

Agar siz IISda hosting qilsangiz; Buni veb-konfiguratsiyaga qo'shish mening muammomni hal qildi

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

Siz boshqa har qanday server uchun shunga o'xshash konfiguratsiya qilishingiz mumkin

IIS Virtual Katalogidan (veb-sayt ildizi emas) reaksiya ilovasiga xizmat koʻrsatishga harakat qilayotganingiz uchun shu yerda boʻlganlar uchun bu siz uchun boʻlishi mumkin.

Qayta yo'naltirishlaringizni o'rnatishda "/" o'z-o'zidan ishlamaydi, men uchun u erda virtual katalog nomi ham kerak edi. Mana mening veb-konfiguratsiyam qanday ko'rinishga ega edi:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <remove value="default.aspx" />
                <remove value="iisstart.htm" />
                <remove value="index.htm" />
                <remove value="Default.asp" />
                <remove value="Default.htm" />
            </files>
        </defaultDocument>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/YOURVIRTUALDIRECTORYNAME/" />
                </rule>
            </rules>
        </rewrite>
        <directoryBrowse enabled="false" />
        <httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
            <remove statusCode="500" subStatusCode="100" />
            <remove statusCode="500" subStatusCode="-1" />
            <remove statusCode="404" subStatusCode="-1" />
            <remove statusCode="403" subStatusCode="18" />
            <error statusCode="403" subStatusCode="18" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="404" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="500" prefixLanguageFilePath="" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="500" subStatusCode="100" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

Web.config fayliga qo'shimcha ravishda reaksiya ilovasining o'zi ham ba'zi o'zgarishlarni talab qiladi:

package.json da siz "bosh sahifa" yozuvini qo'shishingiz kerak:

{
  "name": "sicon.react.crm",
  "version": "0.1.0",
  "private": true,
  "homepage": "/YOURVIRTUALDIRECTORYNAME/",
  "dependencies": {
...

Tarixga kirish uchun routerga o'tkazadigan brauzer tarixi ob'ektiga asosiy nomni qo'shdim:

import  {createBrowserHistory } from 'history';

export default createBrowserHistory({
    //Pass the public URL as the base name for the router basename: process.env.PUBLIC_URL
});

Men ushbu xususiyatni App.js-dagi React routerimga ham qo'shdim:

  <Router history={history} basename={process.env.PUBLIC_URL}>

Nihoyat, index.html da "title" tegi ustiga quyidagi yorliqni qo'shdim

  <base href="%PUBLIC_URL%/">

Eslatma talab qilinadigan ba'zi qadamlar bo'lishi mumkin, lekin bu men uchun ishni bajarganga o'xshaydi. Men uni saytning ildizida yoki virtual katalogda qayta kompilyatsiya qilmasdan ishlash uchun qanday sozlashni bilmayman, lekin men bilganimdek, package.json dagi bosh sahifani qurishdan keyin almashtirib bo'lmaydi.

Haqiqatan ham ajoyib javoblar !! Lekin agar siz nginx-dan foydalanayotgan bo'lsangiz va tezkor tuzatish kerak bo'lsa... joylashuv blokidagi nginx konfiguratsiyasiga quyidagi qatorni qo'shing.

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

Joshua Deykning javobiga qoʻshimcha maʼlumot qoʻshilmoqda.

Agar siz Firebase-dan foydalanayotgan bo'lsangiz va ildiz yo'nalishi va pastki katalog marshrutidan foydalanmoqchi bo'lsangiz, firebase.json-ga quyidagi kodni qo'shishingiz kerak:

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

Misol:

Siz mijoz uchun veb-sayt qurmoqdasiz. Siz veb-sayt egasidan https://your.domain.com/management sahifasiga ma'lumot qo‘shishini xohlaysiz. veb-sayt foydalanuvchilari esa https://your.domain.com saytiga o'tishadi.

Bunday holda, firebase.json faylingiz shunday ko'rinadi:

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

Men WebPack-dan foydalanmoqdaman, menda bir xil muammo bor edi. Solution=> Sizning server.js faylingizda

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

Nima uchun Mening ilovam yangilangandan keyin ko'rsatilmaydimi?

Biz express' 404 ishlov berish usulidan foydalandik.

// path to the static react build directory    
const frontend = path.join(__dirname, 'react-app/build');

// map the requests to the static react build directory
app.use('/', express.static(frontend));

// all the unknown requests are redirected to the react SPA
app.use(function (req, res, next) {
    res.sendFile(path.join(frontend, 'index.html'));
});

Jozibasi kabi ishlaydi. Jonli demo - bu bizning saytimiz

Men bu muammoni webpack.config.js ni o'zgartirish orqali hal qildim.

mening yangi konfiguratsiyam quyidagicha ko'rinadi:

Oldin:

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js'
},


devServer: {
  port: 3000
}

Keyingi:

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js',
  publicPath: '/'
},


devServer: {
  historyApiFallback: true,
  port: 3000
}

Agar siz uni Google Bucket-da ishlatayotgan bo'lsangiz, buning oddiy yechimi Xato (404 topilmadi) sahifasi uchun "index.html" ni ko'rib chiqishdir.

To do so:

1. Chelaklar ro'yxatida siz yaratgan chelakni toping.
2. Paqir bilan bog'langan paqirni to'ldirish menyusini (...) bosing va Veb-sayt konfiguratsiyasini tahrirlash-ni tanlang.
3. Veb-sayt konfiguratsiyasi dialog oynasida xato sahifasi sifatida asosiy sahifani ham belgilang.

React/router bilan backend va frontendda React (react-create-appsiz) yordamida to'g'ri kirish/router marshruti reaksiya komponenti ko'rsatiladi va manzil satrida enter tugmasini bosganingizda menyu havolasi faol uslubga o'rnatiladi. masalan, http://localhost:8050/pages. Iltimos, quyida hisob-kitob qiling yoki to‘g‘ridan-to‘g‘ri mening repomga https://github.com/nickjohngray/staticbackeditor, hammasi kod mavjud.

Veb-paket:

Proksi-serverni sozlash. Bu 3000 (React) portidan har qanday qo'ng'iroqlarga serverga qo'ng'iroq qilish imkonini beradi, shu jumladan enter tugmasi bosilganda index.html yoki manzil satridagi biror narsani olish uchun qo'ng'iroq. shuningdek, JSON ma'lumotlarini olish uchun API marshrutiga qo'ng'iroqlarga ruxsat beradi

await axios.post('/api/login', {email, pwd}) kabi

devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/': 'http://localhost:8050',
    }
  }

Ekspress marshrutlarni sozlang

app.get('*', (req, res) => {
    console.log('sending index.html')
    res.sendFile(path.resolve('dist', 'index.html'))

});

Bu reaktsiyadan kelgan har qanday so'rovga mos keladi, u shunchaki mening dist papkamda joylashgan index.html sahifasini qaytaradi, albatta, bu sahifada yana bir sahifali reaksiya ilovasi mavjud. (boshqa marshrutlar yuqorida ko'rinishi kerakligiga e'tibor bering, mening holimda bu mening API marshrutlarim)

Reaksiya marshrutlari

<Router>
    <Home path="/" />
    <Pages path="pages"/>
    <ErrorPage path="error"/>
    <Products path="products"/>
    <NotFound default />
</Router>

Ushbu marshrutlar mening Layout komponentimda belgilangan, ular yo'l mos kelganda tegishli komponentni yuklaydi.

React Layout konstruktori

 constructor(props) {
        super(props);


        this.props.changeURL({URL: globalHistory.location.pathname});
}

Layout konstruktori yuklanishi bilanoq chaqiriladi. Bu erda men menyum tinglaydigan redux amalimni changeURL deb nomlayman, shunda u quyidagi kabi to'g'ri menyu bandini ajratib ko'rsatishi mumkin:

Menyu kodi

<nav>
    {this.state.links.map( (link) =>
    <Link className={this.getActiveLinkClassName(link.path) } to={link.path}> 
      {link.name}
    </Link>)}            
</nav>

Mening holimda parametrni ishlatganimda url yuklanmadi.

Tezkor tuzatish sifatida Build jildidagi index.html fayl tegi ostiga <base href="<yourdomain/IP>"></base> ni qo'shdim.

Va bu mening muammomni hal qildi.

Menda xuddi shunday muammo bor edi va bu yechim biz uchun ishladi..

Fon:

Biz bir xil serverda bir nechta ilovalarni joylashtiramiz. Biz yangilaganimizda, server ushbu ilova uchun dist papkasida indeksimizni qayerdan qidirishni tushunolmaydi. Yuqoridagi havola sizni biz uchun nima ishlaganiga olib boradi... Umid qilamanki, bu yordam beradi, chunki biz o'z ehtiyojlarimiz uchun yechim topishga ancha vaqt sarfladik.

Biz foydalanamiz:

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

mening webpack.config.js

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

mening index.js

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

mening 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!');
});

Menga bunday munosabatda bo'lish yoqadi. Ushbu muammodan xalos bo'lish uchun server tomonida yourSPAPageRoute/* ni qo'shib ko'ring.

Men ushbu yondashuvdan foydalandim, chunki hatto mahalliy HTML5 History API ham sahifani yangilashda to'g'ri yo'naltirishni qo'llab-quvvatlamaydi (mening bilishimcha).

Eslatma: Tanlangan javob allaqachon bunga javob bergan, ammo men aniqroq bo'lishga harakat qilaman.

Ekspress marshrut

Sinovdan o'tgan va shunchaki buni baham ko'rmoqchi bo'ldim.

Umid qilamanki, bu yordam beradi.

Sizda quyidagi Uy marshruti ta'rifiga ega deb hisoblang

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

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

Home komponentingizda siz ComponentWillMount hodisasida so'rovni to'xtatib qo'yishingiz mumkin,

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

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

Endi, url manzilida /joblist ga qo'ng'iroq qilish o'rniga, /?joblist ni so'rashingiz mumkin va Komponent so'rovni avtomatik ravishda /joblist ga yo'naltiradi (yo'lda qo'shimcha savol belgisiga e'tibor bering)

Agar siz bu erga kelsangiz va apache dan foydalansangiz va .htaccess fayliga ega bo'lmasangiz, bu men uchun ishlagan konfiguratsiya fayli:

sites-enabled/somedomain.com.conf

<VirtualHost *:80>
    ServerName somedomain.com
    ServerAlias *.somedomain.com
    DocumentRoot /www/somedomain.com/build

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /www/somedomain.com/build/index.html [L,NC,QSA]

</VirtualHost>

Preact-router bilan Preact uchun yechim

Yangilanish va to'g'ridan-to'g'ri kirish bilan ishlaydi

Buni Google orqali kashf qilganlar uchun bu erda preact-router + hash tarixining demosi:

const { h, Component, render } = preact; /** @jsx h */
const { Router } = preactRouter;
const { createHashHistory } = History;
const App = () => (
    <div>
        <AddressBar />

        <Router history={createHashHistory()}>
            <div path="/">
                <p>
                    all paths in preact-router are still /normal/urls.
                    using hash history rewrites them to /#/hash/urls
                </p>
                Example: <a href="/uz/page2">page 2</a>
            </div>
            <div path="/page2">
                <p>Page Two</p>
                <a href="/uz/">back to home</a><br/>
            </div>
        </Router>
    </div>
);

jsfiddle

Serverda biror narsani o'zgartirishni talab qilmaydigan men topdim.

Aytaylik, sizning saytingiz mysite.com va sizda mysite.com/about ga React Route bor. Yuqori darajadagi komponentni o'rnatadigan index.js da siz boshqa Routerni qo'yishingiz mumkin:

ReactDOM.render(
<Router>
    <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/about"
            render={(props) => <Home {...props} refreshRout={"/about"}/>}
        />
    </div>
</Router>,

O'ylaymanki, sizda virtual DOMdagi yuqori darajadagi komponentdan pastda joylashgan original Router mavjud. Agar siz Django-dan foydalanayotgan bo'lsangiz, .url-dagi url-ni ham olishingiz kerak:

urlpatterns = [
       path('about/', views.index),
]

Biroq, bu qaysi backend foydalanayotganingizga bog'liq bo'ladi. Mysite/about soʻrovi sizni index.js (yuqori darajali komponentni oʻrnatadigan) ga olib boradi, bu yerda komponent tayanchidan koʻra Marshrutning render tayanchidan foydalanishingiz va “/about” ni tayanch sifatida oʻtkazishingiz mumkin. bu misol, Home komponenti.

Home ichida komponentDidMount() yoki useEffect() kancasida quyidagilarni bajaring:

useEffect() {   
   //check that this.props.refreshRoute actually exists before executing the 
   //following line    
   this.props.history.replace(this.props.refreshRoute);
}

Men sizning Home komponentingiz quyidagi kabi narsalarni ko'rsatmoqda deb taxmin qildim:

<Router>
   <Route exact path="/" component={SomeComponent} />
   <Route path="/about" component={AboutComponent} />
</Router>

Kredit (React Router tomonidan taqdim etilgan komponentga rekvizitlarni uzatish) Marshrutlardagi komponentlarga rekvizitlarni qanday o'tkazish haqida.

Men .Net Core 3.1 dan foydalanmoqdaman va hozirgina MapFallbackToController kengaytmasini qo'shdim:

startup.cs

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapFallbackToController("Index", "Home");
    });

Darhol url manziliga yo'naltirayotgan bo'lsangiz ham ma'lumotlarni so'rashning boshqa usuli - har bir komponentda /about/test kabi oxirgi parametrlarga, so'ngra Davlat provayderingizga qo'ng'iroq qiladigan usulga ega bo'lishdir. ma'lumot so'ramoqchi bo'lgan komponentga ulanadi

Men React.js + Webpack rejimidan foydalanmoqdaman. package.json faylga --history-api-fallback parametrini qo'shdim. Keyin sahifani yangilash to'g'ri ishlaydi. Har bir kodni o'zgartirganimda, veb-sahifa avtomatik ravishda yangilanadi.

"scripts": {
  "start": "rimraf build && cross-env NODE_ENV='development' webpack --mode development && cross-env NODE_ENV=development webpack-dev-server --history-api-fallback",
  ...
}

Men bu savolga o'limga javob berilganini bilaman, lekin bu sizning brauzeringiz routeringizdan proksi pass bilan foydalanmoqchi bo'lgan muammoni hal qilmaydi, bu erda siz rootdan foydalana olmaysiz.

Men uchun yechim juda oddiy.

sizda qandaydir portga ishora qiluvchi url borligini ayting.

location / {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
  port_in_redirect    off;
}

va endi brauzer tufayli routerning pastki yo'llari buzilgan. Biroq, siz pastki yo'llar nima ekanligini bilasiz.

Buning yechimi? /contact pastki yo'l uchun

# just copy paste.
location /contact/ {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
}

Men sinab ko'rgan boshqa hech narsa ishlamadi, lekin bu oddiy tuzatish la'nat jozibasi kabi ishlaydi.

Front-end uchun React va marshrutlash uchun react-router-dom dan foydalanganimda Electronda bu muammoga duch kelganman. Men BrowserRouter ni HashRouter bilan almashtirdim va u tuzatildi. Mana oddiy misol

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

HashRouter oson amalga oshiriladi,

import {HashRouter as Router,Switch,Route,Link} from 'react-router-dom';


  function App() {
  return (
    <Router>
        <Switch>
          <Route path="/" exact component={InitialComponent} />
          <Route path="/some" exact component={SomeOtherComponent} />
        </Switch>
      </Router>
  );
}

Bu brauzerda shunday bo'ladi - http:localhost:3000/#/ , http:localhost:3000/#/some

Dom komponentini yangilaganingizdan so'ng 403 xatosini qabul qila olmaysiz. veb-paket konfiguratsiyasiga ushbu bitta qatorni qo'shing, "historyApiFallback: true ". Bu butun kunimni saqlaydi.

Misol bilan to'liq marshrutizator (React Router v4):

Ishlash namunasi Quyidagi loyihani ko'rib chiqing.

react-router-4-example

Yuklab olingandan so'ng
1.) loyihani o'rnatish uchun cmd-da "npm install"
2.) reaktsiya ilovangizni ishga tushirish uchun "npm start"

Eslatma: Windowsda ishlash uchun Node js dasturi kerak. Mac OS da standart tugun mavjud.

Assalomu alaykum