javascript react-router-dom - React Router مع معلمة المسار الاختياري




tutorial redux (3)

أريد أن أعلن مسارًا بمعلمة مسار اختيارية ، وبالتالي عند إضافته الصفحة للقيام بشيء إضافي (على سبيل المثال ، ملء بعض البيانات):

http://localhost/app/path/to/page <= تقديم الصفحة http://localhost/app/path/to/page/pathParam <= تقديم الصفحة ببعض البيانات وفقًا للمسار

في جهاز التوجيه الخاص بي رد فعل لدي المسارات التالية ، من أجل دعم الخيارين (هذا هو مثال مبسط):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

سؤالي هو ، هل يمكن أن نعلنه في طريق واحد ؟ إذا قمت بإضافة الصف الثاني فقط ، فلن يتم العثور على المسار بدون المعلمة.

تحرير # 1:

إن الحل المذكور here حول الصيغة التالية لم يعمل لي ، هل هو حل مناسب؟ هل توجد في الوثائق؟

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

بلدي نسخة رد فعل هو: 1.0.3


Answers

بالنسبة لأي من مستخدمي React Router v4 الذين يصلون إلى هنا بعد البحث ، فإن المعلمات الاختيارية في <Route> يتم الإشارة إليها بعلامة ? لاحقة.

إليك الوثائق ذات الصلة:

https://reacttraining.com/react-router/web/api/Route/path-string

المسار: سلسلة

أي مسار عنوان URL صالح يفهمه path-to-regexp .

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

اختياري

يمكن إضافة المعامِل بعلامة استفهام (؟) لجعل المعلمة اختيارية. سيؤدي ذلك أيضًا إلى جعل البادئة اختيارية.

مثال بسيط على قسم مقسم إلى صفحات من موقع يمكن الوصول إليه باستخدام رقم صفحة أو بدونه.

<Route path="/section/:page?" component={Section} />

كان التعديل الذي نشرته صالحًا لإصدار قديم من React-router (الإصدار v0.13) ولم يعد يعمل بعد الآن.

React Router v1 و v2 و v3

منذ الإصدار 1.0.0 تقوم بتعريف المعلمات الاختيارية مع:

<Route path="to/page(/:pathParam)" component={MyPage} />

وللمعلمات الاختيارية المتعددة:

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

يمكنك استخدام الأقواس ( ) لف الأجزاء الاختيارية من المسار ، بما في ذلك شرطة مائلة ( / ). راجع صفحة دليل مطابقة المسار من الوثائق الرسمية.

ملاحظة: :paramName المعلمة :paramName مع مقطع عنوان URL إلى التالي / ، ? أو # . لمزيد من المعلومات عن المسارات والمعلمات تحديدًا ، اقرأ المزيد هنا .

React Router v4

يختلف React Router v4 بشكل أساسي عن V1-v3 ، ولا يتم تحديد معلمات المسار الاختيارية بشكل واضح في الوثائق الرسمية أيضًا.

بدلاً من ذلك ، يتم إرشادك إلى تحديد معلمة path-to-regexp تفهمها من path-to-regexp . وهذا يسمح بمرونة أكبر في تحديد مساراتك ، مثل أنماط التكرار ، وحروف البدل ، وما إلى ذلك. لذلك ، لكي تحدد معلمة اختيارية ، فإنك تضيف علامة استفهام زائدة ( ? ).

على هذا النحو ، لتحديد معلمة اختيارية ، يمكنك القيام بما يلي:

<Route path="/to/page/:pathParam?" component={MyPage} />

وللمعلمات الاختيارية المتعددة:

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

ملاحظة: React Router v4 غير متوافق مع react-router-relay ( اقرأ المزيد هنا ). استخدم الإصدار v3 أو إصدار سابق (v2 مستحسن) بدلاً من ذلك.


يمكنك تجربة شيء مثل Routes.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={FrontPage} />
                <Route exact path="/home" component={Homepage} />
                <Route exact path="/about" component={AboutPage} />
                <Route exact path="/admin" component={Backend} />
                <Route exact path="/admin/home" component={Dashboard} />
                <Route exact path="/users" component={UserPage} />    
            </div>
        )
    }
}

export default Routes

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Router>
        <Routes/>
      </Router>
      </div>
    );
  }
}

export default App;

أعتقد أنه يمكنك تحقيق ذلك من هنا أيضًا.





javascript reactjs react-router react-router-v4