like-gold
like-gold•4y ago

custom route element not visible

{ element:<div> <LayoutWrapper>sssshhhhh</LayoutWrapper> </div>, path:"/sample",

} this is my custom route and i want show this page after i click button http://localhost:3000/appointment/sample this way i want url
16 Replies
like-gold
like-goldOP•4y ago
the problem is i want to show this in particular appointment resource
like-gold
like-gold•4y ago
Does this work when you update the path like appointment/sample?
like-gold
like-goldOP•4y ago
it shows 404 error page
like-gold
like-goldOP•4y ago
this one
No description
like-gold
like-goldOP•4y ago
this page is visible when i provide it in url
like-gold
like-gold•4y ago
Checking now, give me couple minutes and we will figure out a way
like-gold
like-goldOP•4y ago
okay
like-gold
like-gold•4y ago
https://stackblitz.com/edit/pankod-refine-tmdtrx?file=src%2FApp.tsx&preset=node
Ali Emir Şen
StackBlitz
Refine Antd Example (forked) - StackBlitz
Run official live example code for Refine Antd, created by Pankod on StackBlitz
like-gold
like-gold•4y ago
Checkout this example there's a resource posts and added a custom route under posts/custom-route Works just fine
like-gold
like-goldOP•4y ago
okay ill check how r routing to this route for example using push?
Omer
Omer•4y ago
You can use useNavigation hook for redirect 
import {
    useNavigation,
} from "@pankod/refine-core";
const { push } = useNavigation();

push("/posts/custom-route")
import {
    useNavigation,
} from "@pankod/refine-core";
const { push } = useNavigation();

push("/posts/custom-route")
https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/#push-replace-and-goback
like-gold
like-gold•4y ago
https://stackblitz.com/edit/pankod-refine-tmdtrx?file=src/pages/posts/list.tsx updated the example like @Omers comment above
Refine Antd Example (forked) - StackBlitz
Run official live example code for Refine Antd, created by Pankod on StackBlitz
like-gold
like-goldOP•4y ago
but the highligted part in the sider is not getting highlighted when it navigates to custom route page . for example post resource in sider is not getting highlighted when it is custom route
like-gold
like-goldOP•4y ago
please check here
like-gold
like-gold•4y ago
You are using a custom sider right? You can add this key by checking the location.pathname (can be accessed via window or useLocation from useRouterContext which is exported from refine-core) Something like this; 
const { useLocation } = useRouterContext();
const { pathname } = useLocation();

const keysFromPath = pathname.split(/\//).filter((el) => el);


return (<Menu selectedKeys={[...selectedKeys, ...keysFromPath]} {...} />
const { useLocation } = useRouterContext();
const { pathname } = useLocation();

const keysFromPath = pathname.split(/\//).filter((el) => el);


return (<Menu selectedKeys={[...selectedKeys, ...keysFromPath]} {...} />
like-gold
like-goldOP•4y ago
i am using custom sider . i tried this but it is not working ...

Did you find this page helpful?