www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫React 16x - قسمت 16 - مسیریابی - بخش 2 - پارامترهای مسیریابی


نویسنده: وحید نصیری
تاریخ: ۱۳۹۸/۰۹/۱۲ ۸:۵
آدرس: www.dntips.ir
در قسمت قبل، نحوه‌ی برپایی و تنظیمات اولیه‌ی کتابخانه‌ی مسیریابی react-router-dom را بررسی کردیم. در ادامه نحوه‌ی دریافت پارامترهای مسیریابی و سایر جزئیات این کتابخانه را مرور می‌کنیم.


دریافت پارامترهای مسیریابی

گاهی از اوقات نیاز به ارسال پارامترهایی به مسیریابی‌های تعریف شده‌است. برای مثال در لیست محصولات تعریف شده، بسته به انتخاب هر کدام، باید id متناظری نیز در URL نهایی ظاهر شود. به این Id، یک Route parameter گفته می‌شود. برای پیاده سازی این نیازمندی به صورت زیر عمل می‌کنیم:
در فایل app.js، یک مسیریابی جدید را برای نمایش جزئیات یک محصول اضافه می‌کنیم:
import ProductDetails from "./components/productDetails";
// ...
class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="container">
          <Switch>
            <Route path="/products/:id" component={ProductDetails} />
            <Route
              path="/products"
              render={props => (
                <Products param1="123" param2="456" {...props} />
              )}
            />
            <Route path="/posts/:year/:month" component={Posts} />
            <Route path="/admin" component={Dashboard} />
            <Route path="/" component={Home} />
          </Switch>
        </div>
      </div>
    );
  }
}
در اینجا برای تعریف یک پارامتر مسیریابی، آن‌را با : شروع می‌کنیم؛ مانند id:، در مسیریابی جدید فوق. البته امکان تعریف چندین پارامتر هم در اینجا وجود دارد؛ مانند تعریف پارامترهای سال و ماه برای مسیریابی مطالب. به علاوه چون این نوع مسیریابی‌ها ویژه‌تر هستند، باید در ابتدا قرارگیرند. برای مثال اگر مسیریابی products/ را در اول لیست قرار دهیم، دیگر کار به انتخاب products/:id/ نخواهد رسید.

کامپوننت جدید src\components\productDetails.jsx نیز به صورت زیر تعریف شده‌است:
import React, { Component } from "react";

class ProductDetails extends Component {
  handleSave = () => {
    // Navigate to /products
  };

  render() {
    return (
      <div>
        <h1>Product Details - </h1>
        <button className="btn btn-primary" onClick={this.handleSave}>
      </div>
    );
  }
}

export default ProductDetails;
پس از این تغییرات و ذخیره سازی برنامه، با بارگذاری مجدد برنامه در مرورگر، ابتدا صفحه‌ی products را از منوی راهبری سایت انتخاب کرده و سپس بر روی یکی از محصولات لیست شده کلیک می‌کنیم. سپس در افزونه‌ی react developer tools، کامپوننت نمایش داده شده‌ی ProductDetails را انتخاب می‌کنیم:


در اینجا با گشودن اطلاعات خاصیت match تزریق شده‌ی به کامپوننت ProductDetails، می‌توان اطلاعاتی مانند پارامترهای دریافتی مسیریابی را دقیقا مشاهده کرد. برای مثال در این تصویر id=1 از URL بالای صفحه که به http://localhost:3000/products/1 تنظیم شده‌است، دریافت می‌شود.
بنابراین امکان خواندن اطلاعات پارامترهای مسیریابی، توسط شیء match تزریق شده‌ی به یک کامپوننت وجود دارد. به همین جهت کامپوننت ProductDetails را ویرایش کرده و المان h1 آن‌را جهت نمایش id محصول به صورت زیر تغییر می‌دهیم که در آن شیء match.params، از props کامپوننت تامین می‌شود:
<h1>Product Details - {this.props.match.params.id} </h1>

برای آزمایش آن مجددا از صفحه‌ی products شروع کرده و بر روی لینک یکی از محصولات، کلیک کنید. در اینجا هرچند id محصول به درستی نمایش داده می‌شود، اما ... نمایش جزئیات آن به همراه بارگذاری کامل و مجدد صفحه‌ی آن است که از حالت SPA خارج شده‌است. برای رفع این مشکل به کامپوننت products مراجعه کرده و anchor‌های تعریف شده را همانطور که در قسمت قبل نیز بررسی کردیم، تبدیل به کامپوننت Link می‌کنیم.
از حالت قبلی:
{this.state.products.map(product => (
  <li key={product.id}>
    <a href={`/products/${product.id}`}>{product.name}</a>
  </li>
))}
به حالت جدید:
import { Link } from "react-router-dom";
// ...

<Link to={`/products/${product.id}`}>{product.name}</Link>
با این تغییر دیگر در حین نمایش یک کامپوننت، بارگذاری کامل صفحه رخ نمی‌دهد.


پارامترهای اختیاری مسیریابی

به تعریف مسیریابی زیر، دو پارامتر سال و ماه، اضافه شده‌اند:
<Route path="/posts/:year/:month" component={Posts} />
و برای مثال اگر بر روی لینک posts در منوی راهبری کلیک کنیم، آدرسی مانند http://localhost:3000/posts/2018/06 ایجاد شده و سپس کامپوننت Posts رندر می‌شود. حال اگر پارامتر ماه را حذف کنیم http://localhost:3000/posts/2018 چه اتفاقی رخ می‌دهد؟ در این حالت برنامه کامپوننت Home را نمایش خواهد داد. علت اینجا است که پارامترهای تعریف شده‌ی در مسیریابی، به صورت پیش‌فرض اجباری هستند. به همین جهت URL وارد شده، چون با الگوی تعریفی Route فوق بدلیل نداشتن قسمت ماه، انطباق نیافته و تنها مسیریابی / که کامپوننت Home را نمایش می‌دهد، با آن تطابق یافته‌است.
برای رفع این مشکل می‌توان با اضافه کردن یک ? به هر پارامتر، پارامترهای تعریف شده را اختیاری کرد:
<Route path="/posts/:year?/:month?" component={Posts} />
در regexهای جاوا اسکریپتی زمانیکه یک ? را به یک عبارت باقاعده اضافه می‌کنیم، یعنی آن عبارت اختیاری است.

با این تغییرات اگر مجددا آدرس http://localhost:3000/posts/2018 را درخواست کنیم، کامپوننت Posts بجای کامپوننت Home نمایش داده می‌شود.

اکنون کامپوننت Posts را به صورت زیر تغییر می‌دهیم تا پارامترهای مسیریابی را نیز درج کند:
import React from "react";

const Posts = ({ match }) => {
  return (
    <div>
      <h1>Posts</h1>
      Year: {match.params.year} , Month: {match.params.month}
    </div>
  );
};

export default Posts;
پارامتر ({ match }) در اینجا به این معنا است که شیء props ارسالی به آن، توسط Object Destructuring تجزیه شده و خاصیت match آن در اینجا به صورت یک پارامتر در اختیار کامپوننت بدون حالت تابعی قرار گرفته‌است.

پس از ذخیره سازی این تغییرات و بارگذاری مجدد برنامه در مرورگر، اگر آدرس http://localhost:3000/posts/2018/1 را وارد کنیم، خروجی زیر حاصل می‌شود:



کار با پارامترهای کوئری استرینگ‌های مسیریابی

پارامترهای اختیاری، جزو قابلیت‌هایی هستند که باید تا حد ممکن از بکارگیری آن‌ها اجتناب و آن‌ها را با کوئری استرینگ‌ها تعریف کرد. کوئری استرینگ‌ها با یک ? در انتهای URL شروع می‌شوند و می‌توانند چندین پارامتر را داشته باشند؛ مانند: http://localhost:3000/posts?sortBy=newest&approved=true و یا حتی می‌توان آن‌ها را با پارامترهای اختیاری نیز ترکیب کرد مانند: http://localhost:3000/posts/2018/05?sortBy=newest&approved=true
برای استخراج کوئری استرینگ‌ها در برنامه‌های React باید از شیء location استفاده کرد:


در اینجا مقدار خاصیت search، کل قسمت کوئری استرینگ‌ها را به همراه دارد. البته ما قصد پردازش آن‌را به صورت دستی نداریم. به همین جهت از کتابخانه‌ی زیر برای انجام اینکار استفاده خواهیم کرد:
> npm i query-string --save
پس از نصب کتابخانه‌ی بسیار معروف query-string، به کامپوننت Posts مراجعه کرده و تغییرات زیر را اعمال می‌کنیم:
import queryString from "query-string";

const Posts = ({ match, location }) => {
  const result = queryString.parse(location.search);
  console.log(result);
  // ...
- پیشتر ذکر پارامتر ({ match }) را بررسی کردیم. در اینجا خاصیت location نیز به آن اضافه شده‌است تا پس از Object Destructuring شیء props ارسالی به کامپوننت، بتوان به مقدار شیء location نیز دسترسی یافت.
- سپس شیء queryString را از ماژول مرتبط، import می‌کنیم. در ادامه به کمک متد parse آن، می‌توان location.search را آنالیز کرد که خروجی آن، یک شیء جاوا اسکریپتی به صورت زیر است:
{approved: "true", sortBy: "newest"}
بنابراین در اینجا هم می‌توان توسط Object Destructuring، به این خواص دسترسی یافت:
 const { approved, sortBy } = queryString.parse(location.search);

یک نکته: باید دقت داشت که کتابخانه‌ی query-string، همیشه مقادیر خواص را رشته‌ای بازگشت می‌دهد؛ حتی اگر عدد باشند.


مدیریت مسیرهای نامعتبر درخواستی

فرض کنید کاربری آدرس غیرمعتبر http://localhost:3000/xyz را که هیچ نوع مسیریابی را برای آن تعریف نکرده‌ایم، درخواست می‌کند. در این حالت برنامه کامپوننت home را رندر می‌کند که مرتبط است با تعاریف مسیریابی برنامه در فایل app.js. تنها path تعریف شده‌ای که با این آدرس تطابق پیدا می‌کند، / متناظر با کامپوننت home است.
بجای این رفتار پیش‌فرض، مایل هستیم که کاربر به یک صفحه‌ی سفارشی «پیدا نشد» هدایت شود. به همین جهت ابتدا کامپوننت جدید تابعی بدون حالت src\components\notFound.jsx را با محتوای زیر ایجاد می‌کنیم:
import React from "react";

const NotFound = () => {
  return <h1>Not Found</h1>;
};

export default NotFound;
سپس ابتدا به مسیریابی /، ویژگی exact را هم اضافه می‌کنیم تا دیگر بجز ریشه‌ی سایت، به مسیر دیگری پاسخ ندهد:
<Route path="/" exact component={Home} />
اکنون اگر مجددا مسیر xyz را درخواست کنیم، فقط کامپوننت NavBar در صفحه ظاهر می‌شود. برای بهبود این وضعیت و نمایش کامپوننت NotFound، مراحل زیر را طی می‌کنیم:
- ابتدا شیء Redirect را از react-router-dom باید import کنیم.
- همچنین import کامپوننت NotFound نیز باید ذکر شود.
- سپس پیش از مسیریابی کلی /، مسیریابی جدید not-found را که به کامپوننت NotFound اشاره می‌کند، اضافه می‌کنیم.
- اکنون در انتهای Switch تعریف شده (جائی که دیگر هیچ مسیریابی تعریف شده‌ای، با مسیر درخواستی کاربر، تطابق نداشته)، باید کامپوننت Redirect را جهت هدایت به این مسیریابی جدید، تعریف کرد:
import { Redirect, Route, Switch } from "react-router-dom";
//...
import NotFound from "./components/notFound";
//...

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="container">
          <Switch>
            //...
            <Route path="/not-found" component={NotFound} />
            <Route path="/" exact component={Home} />
            <Redirect to="/not-found" />
          </Switch>
        </div>
      </div>
    );
  }
}
پس از این تغییرات، اگر آدرس نامعتبر http://localhost:3000/xyz درخواست شود، بلافاصله به آدرس http://localhost:3000/not-found هدایت می‌شویم.

کاربرد دیگر کامپوننت Redirect، هدایت کاربران از یک آدرس قدیمی، به یک آدرس جدید است که نحوه‌ی تعریف آن به صورت زیر می‌باشد:
<Redirect from="/messages" to="/posts" />
با این تنظیم اگر کاربری مسیر http://localhost:3000/messages را درخواست دهد، به صورت خودکار به http://localhost:3000/posts هدایت خواهد شد.


هدایت کاربران به آدرس‌های مختلف با برنامه نویسی

گاهی از اوقات پس از تکمیل فرمی و یا کلیک بر روی دکمه‌ای، می‌خواهیم کاربر را به آدرس خاصی هدایت کنیم. برای مثال در برنامه‌ی جاری می‌خواهیم زمانیکه کاربری صفحه‌ی جزئیات یک محصول را مشاهده و بر روی دکمه‌ی فرضی Save کلیک کرد، دوباره به همان صفحه‌ی لیست محصولات هدایت شود؛ برای این منظور از شیء history استفاده خواهیم کرد:


در اینجا متدها و خواص شیء history را مشاهده می‌کنید. برای نمونه توسط متد push آن می‌توان آدرس جدیدی را به تاریخچه‌ی آدرس‌های مرور شده‌ی توسط کاربر، اضافه کرد و کاربر را با برنامه نویسی، به صفحه‌ی جدیدی هدایت نمود:
class ProductDetails extends Component {
  handleSave = () => {
    // Navigate to /products
    this.props.history.push("/products");
  };

یک نکته: اگر به تصویر دقت کنید، متد replace هم در اینجا قابل استفاده است. متد push با افزودن رکوردی به تاریخچه‌ی آدرس‌های مرور شده‌ی در مرورگر، امکان بازگشت به محل قبلی را با کلیک بر روی دکمه‌ی back مرورگر، فراهم می‌کند؛ اما replace تنها رکورد آدرس جاری را در تاریخچه‌ی مرورگر به روز رسانی می‌کند. یعنی از داشتن تاریخچه محروم خواهیم شد. عمده‌ی کاربرد این متد، در صفحات لاگین است؛ زمانیکه کاربر به سیستم وارد می‌شود و به صفحه‌ی جدیدی مراجعه می‌کند، با کلیک بر روی دکمه‌ی back، دوباره نمی‌خواهیم او را به صفحه‌ی لاگین هدایت کنیم.


تعریف مسیریابی‌های تو در تو


قصد داریم به صفحه‌ی admin، دو لینک جدید به مطالب و کاربران ادمین را اضافه کنیم، به نحوی که با کلیک بر روی هر کدام، محتوای هر صفحه‌ی متناظر، در همینجا نمایش داده شود (تصویر فوق). به عبارتی در حال حاضر، مسیریابی تعریف شده، جهت مدیریت لینک‌های NavBar بالای صفحه کار می‌کند. اکنون می‌خواهیم مسیریابی دیگری را داخل آن برای پوشش منوی کنار صفحه‌ی ادمین اضافه کنیم. به اینکار، تعریف مسیریابی‌های تو در تو گفته می‌شود و پیاده سازی آن توسط کامپوننت react-router-dom بسیار ساده‌است و شامل این موارد می‌شود:
- ابتدا مسیریابی‌های جدید را همینجا داخل کامپوننت src\components\admin\dashboard.jsx تعریف می‌کنیم:
const Dashboard = ({ match }) => {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      <div className="row">
        <div className="col-3">
          <SideBar />
        </div>
        <div className="col">
          <Route path="/admin/users" component={Users} />
          <Route path="/admin/posts" component={Posts} />
        </div>
      </div>
    </div>
  );
};
در اینجا محتوای کامپوننت بدون حالت تابعی Dashboard را ملاحظه می‌کنید که از یک کامپوننت منوی SideBar و سپس در ستونی دیگر، از 2 کامپوننت Route تشکیل شده‌است که بر اساس URL رسیده، سبب رندر کامپوننت‌های جدید Users و Posts خواهند شد.
تنها نکته‌ی جدید آن، امکان درج کامپوننت Route در قسمت‌های مختلف برنامه، خارج از app.js می‌باشد و این امکان محدود به app.js نیست. در این حالت اگر مسیر /admin/posts توسط کاربر وارد شد، دقیقا در همان محلی که کامپوننت Route درج شده‌است، کامپوننت متناظر با این مسیر یعنی کامپوننت Posts، رندر می‌شود.

در ادامه محتوای این کامپوننت‌های جدید را نیز ملاحظه می‌کنید:
محتوای کامپوننت src\components\admin\sidebar.jsx
import React from "react";
import { Link } from "react-router-dom";

const SideBar = () => {
  return (
    <ul className="list-group">
      <li className="list-group-item">
        <Link to="/admin/posts">Posts</Link>
      </li>
      <li className="list-group-item">
        <Link to="/admin/users">Users</Link>
      </li>
    </ul>
  );
};

export default SideBar;

محتوای کامپوننت src\components\admin\users.jsx
import React from "react";

const Users = () => {
  return <h1>Admin Users</h1>;
};

export default Users;

محتوای کامپوننت src\components\admin\posts.jsx
import React from "react";

const Posts = () => {
  return (
    <div>
      <h1>Admin Posts</h1>
    </div>
  );
};

export default Posts;


کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: sample-15-part-02.zip
مطالب مشابه

نظرات

  • میثم سلی در ۱۳۹۹/۰۱/۲۵ ۱۷:۳
    با سلام؛ به نظر میرسه اگر کامپوننتی رو داخل یک کامپوننت دیگر رند کنیم، در حالیکه در کامپوننت فرزند دکمه‌ای داشته باشیم که بعد پردازش بخواد به یک صفحه دیگه‌ای منتقل بشه (redirect کنه)، props دیگه اینجا خالیه و دستور this.props.history.push("") کار نمیکنه و خطای Cannot read property 'push' of undefined رو نشون خواهد داد. 
    اگر جائیکه کامپوننت فرزند رو رندر میکنیم بخوایم props والد رو که شامل شی history هست رو بهش پاس بدیم: 
    <MyComponent{...this.props} />
    اینبار خطای The prop `to` is marked as required in `Redirect`, but its value is `undefined`. رو از react ریافت خواهیم کرد.
    در نهایت باید بجای دستور  this.props.history.push("") از  return <Redirect to={"/search/" + this.state.name} />
    استفاده کنیم . آیا این امکان وجود دارد اگه نخوایم سراغ query string بریم و  بجای استفاده از روش فوق، از همان متد push در شیء history  استفاده کرد؟
  • میثم سلی در ۱۳۹۹/۰۱/۲۵ ۱۷:۲۹
    در صورت استفاده از کامپوننت‌های تو در تو، اگر بخواهید در کامپوننت فرزند اقدام به redirect به صفحه‌ای خاص کنید، شیء history را نخواهید داشت. بنابراین باید جائیکه کامپوننت فرزند رو رندر می‌کنید، شیء props والد رو به عنوان props دریافتی کامپوننت فرزند ارسال کنید:
     <ChildComponent {...this.props} />
  • میثم سلی در ۱۳۹۹/۰۱/۲۵ ۱۷:۵۳
    در صورتیکه قرار باشه یکی از کامپوننت‌های محصور شده در کامپوننت Route به صورت پیشفرض رندر باشه چه راهکاری وجود داره؟
    const Dashboard = ({ match }) => {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      <div className="row">
        <div className="col-3">
          <SideBar />
        </div>
        <div className="col">
          <Route path="/admin/users" component={Users} />
          <Route path="/admin/posts" component={Posts} />
        </div>
      </div>
    </div>
  );
};
    • وحید نصیری در ۱۳۹۹/۰۱/۲۵ ۲۱:۱۹
      - اگر path ذکر نشود، به عنوان مسیریابی پیش‌فرض (catch all) پردازش می‌شود:
      <Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>
      - و یا یک مسیریابی را برای آن، بر اساس مسیر جاری صفحه، در ابتدای لیست تعریف کنید:
      <Route exact path="/current/page/path" component={NewComp}/>
  • میثم سلی در ۱۳۹۹/۰۲/۰۱ ۱۷:۵۴
    با سلام؛ دلیل اینکه وقتی یکی از روت‌هایی که با روش زیر تنظیم شدن رو تو مرورگر مستقیم واردکنیم و درخواست بدیم کل قالب بهم میریزه و انگار css‌های فایل index.html رو نمیشناسه و یا اینکه پردازش نمیکنه و آیا راهکاری داره که این اتفاق نیفته؟ 
      <Route path="/admin/users" component={Users} />
          <Route path="/admin/posts" component={Posts} />
    • وحید نصیری در ۱۳۹۹/۰۲/۰۱ ۱۹:۲۶
      به head فایل index.html، این تگ را اضافه کنید:
      <base href="/" /> <!-- for local host -->

      و یا اگر فایل‌ها را به صورت زیر به فایل index.html معرفی کرده‌اید:  
      <head>
    <link rel="stylesheet" href="./style.css" ></link>
</head>
      باید به این شکل اصلاح شوند:
      <head>
    <link rel="stylesheet" href="/style.css" ></link>
</head>
      اطلاعات بیشتر
  • علی یگانه مقدم در ۱۴۰۰/۱۱/۲۰ ۰:۶
    به روزرسانی : در نسخه 6 react-router-dom  موارد زیادی دست خوش تغییر شده اند که می‌توان به زیر اشاره کرد:
    از این پس به جای Switch از Routes استفاده کنید و استفاده از این تگ اجباری بوده و در صورت اینکه تگهای Route داخل تگهای Routes قرار داده نشوند خطای آن در کنسول مشاهده میگردد.
    <Routes>
<Route path="/product/list" element={<ProductList/>}  />
<Route path="/product/new" element={<NewProduct/>} />
</Routes>
    همچنین با جای خصوصیت component خصوصیت element را مورد استفاده قرار دهید و تگ کامپوننت را داخل آن بگذارید. در این حالت مسیریابی نیاز به رعایت ترتیب خاصی نیست و دقیقا باید همان مسیر path وارد شود تا کامپوننت در دسترس قرار گیرد.
    برای مسیریابی‌های تو در تو یا Nesting که نسبت به قبل خیلی مفاهیم ساده‌تری دارد. روش پیاده سازی مسیریابی تو در تو به صورت تگ‌های تو در تو آمده و از لحاظ طراحی بسیار به مفهوم آن نزدیک‌تر میباشد و اینکه سعی شده است تمام مدخل‌های Route در یک جا قرار بگیرند:
    <Routes>

<Route path="/post" element={<Posts/>}>
  <Route path="images" element={<Images />} />
    <Route path="text" element={<Text />} />
    <Route path="/post" element={<Text />} />
</Route>
</Routes>
    و برای لینک دادن :
                <div className="list-group">
  <Link to="/post/images" className="list-group-item list-group-item-action active" aria-current="true">
    Images Post
  </Link>
  <Link to="/post/text" className="list-group-item list-group-item-action">Text Post</Link>
</div>
<Outlet />

    در این حالت کاربر به مسیر post هدایت شده و با کلیک بر روی گزینه‌های images و text میتواند پست متنی و تصویری را جدا در زیر گزینه‌ها به جای تگ outlet مشاهده نماید
    البته مسیرهای زیرین را نیز می‌توان به شکل زیر هم نوشت:
                <div className="list-group">
  <Link to="images" className="list-group-item list-group-item-action active" aria-current="true">
    Images Post
  </Link>
  <Link to="text" className="list-group-item list-group-item-action">Text Post</Link>
</div>
<Outlet />
    در این حالت نیاز است تنها مسیر آخر که قرار است به انتهای آدرس اضافه شود نوشته شود. در صورتی که قصد داشته باشیم بخش پست‌های متنی به طور پیش فرض با آدرس post هم باز شود و الزامی حتما به آدرس post/text نباشد میتوان اینگونه تغییر داد:
    <Routes>
<Route path="/post" element={<Posts/>}>
  <Route path="images" element={<Images />} />
    <Route path="text" element={<Text />} />
    <Route path="/post" element={<Text />} />
</Route>
</Routes>
    در قسمت مسیریابی همان نام post/ نوشته می‌شود.
    در انتها برای صفحاتی مانند NotFound میتوان از علامت * و اشاره به آن کامپوننت استفاده کرد:
    <Routes>
<Route path="/product/list" element={<ProductList/>}  />
<Route path="/product/new" element={<NewProduct/>} />
<Route path="/post" element={<Posts/>}>
  <Route path="images" element={<Images />} />
    <Route path="text" element={<Text />} />
    <Route path="/post" element={<Text />} />
</Route>
<Route path="*" element={<NotFound />} />
</Routes>

    • علی یگانه مقدم در ۱۴۰۰/۱۲/۰۵ ۱۸:۷
      در ادامه کامنت قبلی  برای به دست آوردن پارامترهای قرار گرفته در مسیریابی باید به شکل زیر توابع بدون state عمل کرد:
      import React, { Component } from 'react';
import {useParams,useNavigate,useLocation} from 'react-router-dom';
import { useEffect } from 'react';
const TestRoute=(props)=>{
 
    const navigate=useNavigate();
    const location=useLocation()
    const params=useParams();
    const {id,name}=useParams();
    useEffect(()=>{
        console.log(location.search);
    },[])
    const gotosfc=()=>{
        navigate("/sfc",{replace:true});
    }
    return(
        <>
       
        <strong>Id :</strong> {id}
        <br/>
        <strong>Name :</strong> {name}
        <br/>
        <button onClick={()=>gotosfc()}>Go to SFC</button>
        </>
    )
}
export default TestRoute;
      با استفاده از useNvigate میتوان کاربر را به آدرس‌های دیگر هدایت کرد و با تنظیمات replace برابر با مقدار true مسیر جدید جایگزین مسیر فعلی خواهد شد که کاربر با دکمه back امکان بازگشت به صفحات قبل را ندارد که برای صفحاتی مانند لاگین بسیار مناسب است.
      useParams تمامی پارامترهای مسیریابی داخل خود قرار میدهد:
      <Route path="/product/edit/:id/:name" element={<TestRoute />} />
      که در این آدرس دهی دو پارامتر namre و id تعریف شده اند. همچنین در صورتی که تمایل داشته باشید که پارامتر name اختیاری باشد باید دو مسیر متفاوت از آن تعریف کنید و علامت سوال ؟ مانند قبل قابل قبول نمیباشد:
      <Route path="/product/edit/:id" element={<TestRoute  />} />
<Route path="/product/edit/:id/:name" element={<TestRoute  />} />
      useLocation نیز اطلاعات آدرس رو به شما میدهد که در قسمت pathname آدرس صفحه در اختیار شما قرار میگیرد و اگر پارامتری به صورت query string ارسال شود باید از طریق خصوصیت search آن را دریافت نمایید