Chakra-ui × React-Location でリンクを作成する Tips

React Location のリンク

import { Route, ReactLocation, Outlet , Link } from '@tanstack/react-location';
export const location = new ReactLocation();

export function App() {
  return (
    <Router routes={routes} location={location}>
      <Link to='/'>Home</Link>
      <Link to='/posts'>Posts</Link>
       <Outlet />
    </Router>
  );
}

Link コンポーネントを用い遷移先のパスを to プロパティで設定する

Chakra-ui Link × React-Location Link

Chakra-ui の Link コンポーネントの as プロパティに React-Location の Link コンポーネントを指定すればOK

import { Link as ChakraLink, } from '@chakra-ui/react';
import { Link } from '@tanstack/react-location';

const MyComponent: FC = () => {
  return (
    <ChakraLink as={Link} to={path}>
      {label}
    </Button>
  );
}

Chakra-ui Button × React-Location Link

🙅 `<Button as={Link} />` は動作するが警告が発生する

import { Button } from '@chakra-ui/react';
import { Link } from '@tanstack/react-location';

const MyComponent: FC = () => {
  return (
    <Button as={Link} to={path}>
      {label}
    </Button>
  );
}

=> Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

👇

🙆 Button を Link コンポーネントで囲う

import { Button } from '@chakra-ui/react';
import { Link } from '@tanstack/react-location';

const MyComponent: FC = () => {
  return (
    <Link to={to}>
      <Button {…buttonProps} as='span'>{label}</Button>
    </Link>
  );
}