How do I pass a function dynamically to the routes call

Get Help and Help Others
1 
import { NavLink, routes } from '@redwoodjs/router'

export const QUERY = gql`
  query {
    dasections {
      id
      title
    }
    dalinks {
      id
      name
      icon
      path
      dasectionId
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }) => (
  <div style={{ color: 'red' }}>Error: {error?.message}</div>
)

export const Success = ({ dasections, dalinks }) => {
  return dasections.map((section) => (
    <div key={section.id} className="text-gray-600">
      <p className="m-3 mt-8 uppercase text-gray-400">{section.title}</p>
      {dalinks.map(({ path, id, icon, name, dasectionId }) => (
        <div key={id}>
          {section.id === dasectionId ? (
            <div className="">
              (I've tried many things can't get it to work) 
              <NavLink to={routes.path}>
                <div className="m-3 flex items-center gap-2 pt-2">
                  <span className="material-icons md-18">{icon}</span>
                  <p className="capitalize">{name}</p>
                </div>
              </NavLink>
            </div>
          ) : (
            ''
          )}
        </div>
      ))}
    </div>
  ))
}
2

I’m trying to pass the path for the URL from sqlite.

3

If path is the name of the page you want to navigate to you could try <NavLink to={routes[path]()}>

If path is the full path/url you just need to do <NavLink to={path}>

5

If I pass http://localhost:8910/deskview as the url in <NavLink to={path}> I’m getting invalid port

6

I did try your suggested solution and I’m getting an error path is not a function. <NavLink to={routes.home()}> , the function home calls the route from the routes file when it is stated, however Im trying to dynamically pass in the function to call the routes that I’ve already created and that is not working. Path contains the function eg. deskview(), so by using the map function I’m trying to pass all of the routes through the path. so {routes[path]()} should resolve to {routes.deskview()} or whatever routes I’m passing to NavLink. I hope I’ve explained it properly.

7

Sorry for bombarding you like this but I was able to get a solution based on your suggestion. The URL I was passing to path was http://localhost:8910/deskview what I should have used was /deskview and it worked thank you for your assistance

1 Like
8

Great! Happy you got it working

9

@Tobbe has routes[path]() been deprecated or something? I’m trying to create scaffolds but I’m getting a buttonTo is not a function and titleTo is not a function error.

Thanks!

10

No. As long as path is a valid route name that should still work.
It looks like you’re trying to call a route named buttonTo. Do you have a route named “buttonTo”?