تنفيذ إعادة التحميل الصعب في React

1

لدي تطبيق React يعمل على خادم apache / PHP.

يتم تحميل تطبيق React على مسار المنزل. أي أنه تم تكوين PHP للتحميل index.html في ال / المسار الذي يحمّل تطبيق React.

index.html

// ....
<div id="react-hook"></div>

<script>
    const wrapper = document.getElementById("react-hook");
    wrapper ? ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, wrapper) : false;
</script>

(أنا في الواقع باستخدام Webpack ولكن هذا هو جوهره)

أنا استخدم react-router لتحديد بعض الطرق:

const Routes = () => (

    <div>                
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/test" component={Test} />
    </div>

)

ونقدم لهم بعض الروابط ..

<Link to="/>Home</Link>     
<Link to="/login>Login</Link>
<Link to="/test>Test</Link>

يعمل هذا بشكل جيد ولكن عندما قمت بإعادة تحميل الصفحة بجد ، كان المسار الذي تم تحميله هو المسار المحدد على الخادم .

ولمعالجة ذلك ، قمت بإعداد قاعدة على الخادم لإعادة توجيه جميع الطلبات إلى مسار المنزل / أين index.html يقع - بهذه الطريقة يتم تحميل تطبيق رد الفعل لجميع الطلبات.

هذا أقرب إلى حل مشكلتي ولكن الآن جميع الطرق المحملة بالصعوبات تهبطني في طريق رد فعل المنزل على عكس الطريق الذي كنت أحاول إعادة تحميله.

behavior: /test (hard route) ---> / (soft route)

should be: /test (hard route) ---> /test (soft route)

ما هي الطريقة الصحيحة لتنفيذ إعادة التحميل الصعب لتطبيق رد فعل؟

1 إجابة

1
افضل جواب

يعتمد ذلك على الخادم الذي تستخدمه. لا تريد إعادة توجيه جميع الطلبات إلى / . تريد عرضه /index.html بغض النظر عن الطلب الذي تتلقاه . إذا طلب المستخدم /test ، الخادم الخاص بك يعطيهم /index.html لكن يسميها /test . إنهم لا يحصلون على 404 ، ولا يحصلون على 301. إنهم يحصلون على رمز الحالة 200 لـ /test لكنهم يحصلون على محتويات /index.html .

بالنسبة لـ nginx ، هذا شيء مثل try_files $uri index.html .

بالنسبة لأباتشي ، يمكنك استخدامها mod_rewrite لإعادة كتابة كل شيء غير موجود (شيء مثل RewriteCond %{REQUEST_FILENAME} !-f لشرط أن الملف غير موجود لإعادة الكتابة) المسارات إلى /index.html مع RewriteRule .* /index.html .

يحتاج تطبيق React فقط إلى نفس نقطة الدخول ( <App /> ) ، وسيستخدم جهاز توجيه رد الفعل عند تحميل الصفحة عنوان URL للصفحة للتنقل وفقًا لذلك ، لذا تستخدم جميع المسارات نفس العنوان index.html إلى الأرض حيث يذهبون.

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام