در ادامه کامنت قبلی برای به دست آوردن پارامترهای قرار گرفته در مسیریابی باید به شکل زیر توابع بدون 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 آن را دریافت نمایید