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?

5 Replies

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

kapa.ai•2y ago

---------------------- To add a link to a resource within a TextField, you can use the Url 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 Url field component uses Ant Design's <Typography.Link> (https://ant.design/components/typography/) component. You can pass a URL in its value prop and show a text in its place by passing any 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 Url field component uses Material UI <Typography> (https://mui.com/material-ui/react-typography/#main-content) and Link (https://mui.com/material-ui/react-link/#main-content) components. You can pass a URL in its value prop and show a text in its place by passing any 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 :speech_balloon: ----------------------

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•2y ago

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

generous-apricotOP•2y ago

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

extended-salmon•2y ago

Hey @_nirock, You can use the 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.