جاوااسکریپت - ریاکت روتر با پارامتر مسیر اختیاری

میخواهم یک مسیر با یک پارامتر مسیر اختیاری تعریف کنم، بنابراین وقتی آن را اضافه میکنم، صفحه کاری اضافی انجام میدهد (مثلاً پر کردن برخی دادهها):

http://localhost/app/path/to/page <= صفحه را نمایش بده http://localhost/app/path/to/page/pathParam <= صفحه را با برخی دادهها بر اساس 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:

راهحلی که در اینجا درباره نحو زیر ذکر شده برای من کار نکرد، آیا راهحل مناسبی است؟ آیا در مستندات وجود دارد؟

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

نسخه react-router من: 1.0.3

پاسخ شماره ۱

ویرایشی که منتشر کردید برای نسخهی قدیمیتر React-router (v0.13) معتبر بود و دیگر کار نمیکند.

ریاکت روتِر نسخهٔ ۱، ۲ و ۳

از نسخه 1.0.0 شما پارامترهای اختیاری را با این روش تعریف میکنید:

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

و برای چندین پارامتر اختیاری:

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

شما از پرانتز ( ) برای محصور کردن قسمتهای اختیاری مسیر استفاده میکنید، از جمله اسلش اولیه (/). صفحه راهنمای تطبیق مسیر در مستندات رسمی را بررسی کنید.

توجه: پارامتر :paramName با یک بخش از URL تا رسیدن به /، ? یا # مطابقت دارد. برای اطلاعات بیشتر درباره مسیرها و پارامترها به طور خاص، اینجا بیشتر بخوانید.

ریاکت روتِر نسخه ۴ به بالا

مستندات React Router v6 را برای Optional Segments بررسی کنید.

React Router نسخه ۴ اساساً با نسخههای ۱ تا ۳ متفاوت است و پارامترهای مسیر اختیاری هم در مستندات رسمی بهطور صریح تعریف نشدهاند.

به شما دستور داده شده است که یک پارامتر path تعریف کنید که path-to-regexp آن را میفهمد. این امکان را برای شما فراهم میکند تا انعطافپذیری بیشتری در تعریف مسیرهای خود داشته باشید، مانند الگوهای تکراری، کاراکترهای عمومی و غیره. بنابراین برای تعریف یک پارامتر به صورت اختیاری، یک علامت سؤال (?) به انتهای آن اضافه میکنید.

بنابراین، برای تعریف یک پارامتر اختیاری، شما انجام میدهید:

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

و برای چندین پارامتر اختیاری:

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

توجه: React Router نسخه ۴ با react-router-relay ناسازگار است (برای اطلاعات بیشتر اینجا را بخوانید). به جای آن از نسخه ۳ یا نسخههای قبلی (نسخه ۲ توصیه میشود) استفاده کنید.

پاسخ شماره ۲

برای هر کاربر 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} />

پاسخ شماره ۳

نحو کاری برای چندین پارامتر اختیاری:

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

حال، آدرس اینترنتی میتواند باشد:

1. /بخش
2. /بخش/صفحه/1
3. /بخش/صفحه/1/مرتب/صعودی

پاسخ شماره ۴

خب از آنجایی که شما نسخه react-router خود را ۱.۰.۳ ذکر کردهاید، میتوانید راهحل خود را در میان پاسخهای قبلی پیدا کنید.

با این حال، از React Router v6 این گزینه همانطور که ذکر شد حذف شده است. اینجا

بنابراین برای React Router v6 موارد زیر:

<Route path='/page/:friendlyName/:sort?' element={<Page/>} />

جایگزین خواهد شد با :

<Route path='/page/:friendlyName/:sort' element={<Page/>} />
<Route path='/page/:friendlyName/' element={<Page/>} />

یا شما همچنین میتوانید استفاده کنید :

<Route path="/page/:friendlyName">
    <Route path=":sort" element={<Page />} />
    <Route path="" element={<Page />} />
 </Route>

پاسخ شماره ۵

برای react-router V5 از سینتکس زیر برای چند مسیر استفاده کنید

<Route
          exact
          path={[path1, path2]}
          component={component}
        />

برای V6

<Route path="/teams" element={<Teams />}>
  <Route index element={<TeamsIndex />} />
  <Route path=":teamId" element={<Team />} />
</Route>