Refine•3y ago

Best practice of adding a link to a resource

How can I add a link to a resource within a TextField? What is the best practice here?

kapa.ai•4/20/23, 3:25 PM

Hi @_nirock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•4/20/23, 3:26 PM

----------------------
To add a link to a resource within a TextField, you can use the UrlUrl field component provided by refine. The implementation depends on the UI library you are using. Here are the examples for Ant Design and Material UI:

Ant Design:

The UrlUrl field component uses Ant Design's <Typography.Link><Typography.Link> (https://ant.design/components/typography/) component. You can pass a URL in its

value

value

prop and show a text in its place by passing any

children

children

import { Url } from "@refinedev/antd";

<Url value="https://example.com">Example Link</Url>

import { Url } from "@refinedev/antd";

<Url value="https://example.com">Example Link</Url>

Source: https://refine.dev/docs/api-reference/antd/components/fields/url (https://refine.dev/docs/api-reference/antd/components/fields/url)

Material UI:

The UrlUrl field component uses Material UI <Typography><Typography> (https://mui.com/material-ui/react-typography/#main-content) and LinkLink (https://mui.com/material-ui/react-link/#main-content) components. You can pass a URL in its

value

value

prop and show a text in its place by passing any

children

children

import { Url } from "@refinedev/mui";

<Url value="https://example.com">Example Link</Url>

import { Url } from "@refinedev/mui";

<Url value="https://example.com">Example Link</Url>

Source: https://refine.dev/docs/api-reference/mui/components/fields/url (https://refine.dev/docs/api-reference/mui/components/fields/url)

These are the best practices for adding a link to a resource within a TextField using refine.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

Typography - Ant Design

Url | refine

This field lets you embed a link. It uses Ant Design's component. You can pass a URL in its value prop and you can show a text in its place by passing any children.

React Typography component - Material UI

Use typography to present your design and content as clearly and efficiently as possible.

Links - Material UI

The Link component allows you to easily customize anchor elements with your theme colors and typography styles.

kapa.ai•4/20/23, 3:26 PM

@335790220425297921 kapa.ai is still learning and improving, please let us how it did by reacting below

ordinary-sapphireOP•4/20/23, 3:28 PM

This doesn't seems like a good way to redirecting to another resource

colossal-harlequin•4/21/23, 8:04 PM

Hey @_nirock,

You can use the

useNavigation

useNavigation

hook.

https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/

useNavigation | refine

useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.