如何使用nextjs和chakra处理urls？

Question

当我们用chakra (eg.Text)组件直接使用react时，我们无法处理链接。

问题用例

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

export default function Usage(){

return (
 <Linkify>
  <Text>https://stackoverflow.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://stackoverflow.com</Text>
 </Linkify>
 )
}

问题解决了！谢谢..。