afraid-scarlet

TypeError with Link component

I am using file based routing and I have a home page under "/home" and the following code in my navigation component:

import {Link} from '@tanstack/react-router'

const Nav = () => {
    return (
        <nav>
            <Link to="/home">Home</Link>
        </nav>
    )

import {Link} from '@tanstack/react-router'

const Nav = () => {
    return (
        <nav>
            <Link to="/home">Home</Link>
        </nav>
    )

I followed the docs but still get the following error: "Element Link doesn't have required attribute search ". I think this might be a bug because the type for the search property is search: true | {} | ((current: {}) => {}) | undefined.

Navigation | TanStack Router React Docs

Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...

10 Replies

extended-salmon•2y ago

Does the home route have a required searchParam ?

afraid-scarletOP•2y ago

No. The route code was added automatically when I added the file and I didn't change anything.

sunny-green•2y ago

did you register the router as described here? https://tanstack.com/router/latest/docs/framework/react/quick-start#srcmaintsx

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

Quick Start | TanStack Router React Docs

If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router using both file-based route generation and code-based route configuration: Using File-Based Route Generation + Vite

sunny-green•2y ago

if yes, please try creating a minimal complete reproducer by forking one of the existing examples on stackblitz

like-gold•2y ago

I had a quick go and I cannot replicate this. Do you have any different TS settings?

afraid-scarletOP•2y ago

yes, i registered the router like in the example above. I'll try and send you a link. @Chris Horobin these are my ts settings:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@*": ["src/*", "dist/*"],
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@*": ["src/*", "dist/*"],
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

like-gold•2y ago

I don't see anything odd here. Do you have other routes with search params?

afraid-scarletOP•2y ago

No, I don't use search params for this app.

like-gold•2y ago

You ran the generator after the file was added? What TS version? Might need a reproduction. I'm going to be changing the types for optional/required soon so hopefully this might fix the issue

afraid-scarletOP•2y ago

I tried to reproduce it with a new version and it was not a problem anymore. Sorry, I didnt realize there were new minor versions. I updated my project too and the type error is gone with 1.34.9. Thx for the help :)

Gaming

Programming

TypeError with Link component

Did you find this page helpful?