harsh-harlequin

Correct usage of `createLink`?

I'm attempting to use createLink to combine the Link component from react-router with the Link component from chakra-ui. However, the resulting component results in only having the key & ref props; no props from either of the Link components. I also get an error locally:

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

Check the render method of `ForwardRef(Link2)`.

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

Check the render method of `ForwardRef(Link2)`.

This is an odd error since the Charka Link component does support passing a ref. The local UI does not load and eventually ends up crashing. I tried recreating the error in Stackblitz, but its dev server refuses to load as long as I have the combined Link component in the DOM. If I comment the component out, the site loads just fine. https://stackblitz.com/edit/tanstack-router-tqplqm?file=src%2Froutes%2Findex.tsx

Kasey Culmback

StackBlitz

Router Basic File Based Example (forked) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

6 Replies

ambitious-aqua•2y ago

Honestly, I don't think that the createLink function is ready for prod use. It was introduced here and was titled as experimental. IMO: I too still haven't figured out how to get that function to work either.

GitHub

fix: experimental support for createLink · TanStack/router@c2fbb56

spiritual-aqua•2y ago

@Sean Cassiere I fixed it here: https://github.com/TanStack/router/pull/1373 I think it works great on type level, as I've described here: https://github.com/TanStack/router/issues/1271#issuecomment-2020366735

GitHub

fix: rename component created by createLink by TkDodo · Pull Reques...

because if it's named Link, the world explodes refs #1271

GitHub

ToOptions doesnt't satisfy props. · Issue #1271 · TanStack/router

Describe the bug thing I need - a Component, that wraps , so I can add predefined styles to all of my links. To use "more advanced" paths with them, I found a Type - ToOptions (https://ta...

harsh-harlequinOP•2y ago

@TkDodo 🔮 I saw your example on TS Playground, but unfortunately the latest update still doesn't seem to play nicely with Chakra. Updated my example to test out a few different scenarios. The closest I could get is having the resulting CreatedLink component have both the types from Chakra & react-router, but the types from react-router don't work properly. https://stackblitz.com/edit/tanstack-router-rgk53c?file=src%2Froutes%2Findex.tsx

Kasey Culmback

StackBlitz

Router Basic File Based Example (forked) - StackBlitz

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

spiritual-aqua•2y ago

doesn't play nice on type level or at runtime ? also, if I add the required postId to ChakraLink2, it works:

<ChakraLink2 to="/posts/$postId" params={{ postId: '1' }}>
  Has props but router link props are broken
</ChakraLink2>

<ChakraLink2 to="/posts/$postId" params={{ postId: '1' }}>
  Has props but router link props are broken
</ChakraLink2>

harsh-harlequinOP•2y ago

I meant on a type level; previously it wasn't showing an error in the editor that the params prop was missing... But I just reopened it and it's working now 🤷🏻‍♂️ Thanks for your help!

spiritual-aqua•2y ago

that's why I asked about runtime vs. type level. If it's just type level - do a TypeScript playground. Way more accurate than stackblitz or codesandbox

Gaming

Programming

Correct usage of `createLink`?

Did you find this page helpful?