如何使用 nextjs 和 chakra-ui 处理 url？

Question

当我们直接使用 react linkify 与 chakra-ui (eg.Text) 组件时，我们无法处理 link.

有问题的用例

import Linkify from 'react-linkify';
import {Box, Text} from '@chakra-ui/react';

export default function Usage(){

return (
 <Linkify>
  <Text>https://whosebug.com</Text>
 </Linkify>
);

};

Answer 1

解决方案是；

创建Linkify.js

Linkify.js 文件:

import { Link } from '@chakra-ui/react';
import ReactLinkify from 'react-linkify';

const componentDecorator = (href, text, key) => (
  <Link
    href={href}
    key={key}
    isExternal={true}
    color="blue.500"
    _focus={{ outline: 'none' }}
  >
    {text}
  </Link>
);

export const Linkify = (props) => {
  return <ReactLinkify {...props} componentDecorator={componentDecorator} />; };

将新的 Linkify 组件导入文件。

用法

import { Linkify } from './Linkify';
import { Text } from '@chakra-ui/react';

export default function Usage(){
 return(
 <Linkify>
  <Text>https://whosebug.com</Text>
 </Linkify>
 )
}

问题解决了！谢谢...

如何使用 nextjs 和 chakra-ui 处理 url？

How to handle urls with nextjs and chakra-ui?

javascript

reactjs

next.js

chakra-ui