Dynamic Routes with useRoutes. How to get params from the url ?
I got this routes that i later use with useRoutes hook. I need to create dynamic url of email with serial. And i need to get serial param from url but if i use useLocation or useParams hook i got no data.
import React from "react";
import App from "./../app.jsx";
import { Navigate, useLocation } from "react-router-dom";
import DashboardView from "./../pages/dashboardview/dashboardview.js";
import Analytics from "./../pages/analytics/analytics.js";
import EmailInbox from "./../pages/email/inbox.js";
const checkLocationParams = (location) => {
console.log("location");
console.log(location);
console.log("location");
return true;
};
const AppRoute = (token, guid, location) => [
{
path: "*",
element: <App token={token} guid={guid} />,
children: [
{ path: "", element: token && guid ? <Navigate to="/dashboard" /> : <Navigate to="/pages/login" /> },
{ path: "dashboard", element: token && guid ? <DashboardView /> : <Navigate to="/pages/login" /> },
{ path: "analytics", element: token && guid ? <Analytics /> : <Navigate to="/pages/login" /> },
{
path: "email/*",
children: [
{
index: false,
element: token && guid ? <EmailInbox /> : <Navigate to="/pages/login" />,
},
{
path: "email/:serial",
element:
token && guid ? (
checkLocationParams(location) ? (
<EmailInbox />
) : (
<Navigate to="/pages/login" />
)
) : (
<Navigate to="/pages/login" />
),
},
],
},
],
},
];
export default AppRoute;
import React from "react";
import App from "./../app.jsx";
import { Navigate, useLocation } from "react-router-dom";
import DashboardView from "./../pages/dashboardview/dashboardview.js";
import Analytics from "./../pages/analytics/analytics.js";
import EmailInbox from "./../pages/email/inbox.js";
const checkLocationParams = (location) => {
console.log("location");
console.log(location);
console.log("location");
return true;
};
const AppRoute = (token, guid, location) => [
{
path: "*",
element: <App token={token} guid={guid} />,
children: [
{ path: "", element: token && guid ? <Navigate to="/dashboard" /> : <Navigate to="/pages/login" /> },
{ path: "dashboard", element: token && guid ? <DashboardView /> : <Navigate to="/pages/login" /> },
{ path: "analytics", element: token && guid ? <Analytics /> : <Navigate to="/pages/login" /> },
{
path: "email/*",
children: [
{
index: false,
element: token && guid ? <EmailInbox /> : <Navigate to="/pages/login" />,
},
{
path: "email/:serial",
element:
token && guid ? (
checkLocationParams(location) ? (
<EmailInbox />
) : (
<Navigate to="/pages/login" />
)
) : (
<Navigate to="/pages/login" />
),
},
],
},
],
},
];
export default AppRoute;
1 Reply
extended-salmonOP•3y ago
This is a code with my routes i pass them location that i want to use later in component
and this is how i navigate to my dynamic url
Do you have an idea how i need to modify my routes to make dynamic routes and get values of params : serial ?
let location = useLocation();
const [searchParams] = useSearchParams();
const serial = searchParams.get("serial");
const element = useRoutes(AppRoute(token, guid, location));
console.log('serial')
console.log(serial)
console.log('serial')
let location = useLocation();
const [searchParams] = useSearchParams();
const serial = searchParams.get("serial");
const element = useRoutes(AppRoute(token, guid, location));
console.log('serial')
console.log(serial)
console.log('serial')
const handleRowClick = (rowData) => {
const { serial } = rowData;
navigate(`/email/${serial}`, { state: {} });
};
const handleRowClick = (rowData) => {
const { serial } = rowData;
navigate(`/email/${serial}`, { state: {} });
};