Type-Safe Links
If you are using Typescript, you can use Wasp's custom Link component to create type-safe links to other pages on your site.
Using the Link Componentβ
After you defined a route:
routeTaskRoute{path: "/task/:id",to: TaskPage}
pageTaskPage{ ... }
You can get the benefits of type-safe links by using the Link component from wasp/client/router:
import{Link}from'wasp/client/router'
exportconstTaskList=()=>{
// ...
return(
<div>
{tasks.map((task)=>(
<Link
key={task.id}
to="/task/:id"
{/* π You must provide a valid path here */}
params={{id: task.id}}>
{/* π All the params must be correctly passed in */}
{task.description}
</Link>
))}
</div>
)
}
Catch-all Routesβ
If a route path ends with a /* pattern (also known as splat), you can use the Link component like this:
routeCatchAllRoute{path: "/pages/*",to: CatchAllPage}
pageCatchAllPage{ ... }
<Linkto="/pages/*"params={{'*':'about'}}>
About
</Link>
This will result in a link like this: /pages/about.
Optional Static Segmentsβ
If a route contains optional static segments, you'll need to specify one of the possible paths:
routeOptionalRoute{path: "/task/:id/details?",to: OptionalPage}
pageOptionalPage{ ... }
/* You can include ... */
<Linkto="/task/:id/details"params={{id:1}}>
Task 1
</Link>
/* ... or exclude the optional segment */
<Linkto="/task/:id"params={{id:1}}>
Task 1
</Link>
Using Search Query & Hashβ
You can also pass search and hash props to the Link component:
<Link
to="/task/:id"
params={{ id: task.id}}
search={{ sortBy:'date'}}
hash="comments"
>
{task.description}
</Link>
This will result in a link like this: /task/1?sortBy=date#comments. Check out the API Reference for more details.
The routes Objectβ
You can also get all the pages in your app with the routes object:
import{ routes }from'wasp/client/router'
const linkToTask = routes.TaskRoute.build({params:{id:1}})
This will result in a link like this: /task/1.
Optional Static Segmentsβ
If a route contains optional static segments, you'll need to specify one of the possible paths:
routeOptionalRoute{path: "/task/:id/details?",to: OptionalPage}
pageOptionalPage{ ... }
const linkToOptional = routes.OptionalRoute.build({
path:'/task/:id/details',// or '/task/:id'
params:{ id:1},
})
You can also pass search and hash props to the build function. Check out the API Reference for more details.
API Referenceβ
Link Componentβ
The Link component accepts the following props:
-
torequired-
A valid Wasp Route path from your
main.waspfile.In the case of optional static segments, you must provide one of the possible paths which include or exclude the optional segment. For example, if the path is
/task/:id/details?, you must provide either/task/:id/detailsor/task/:id.
-
-
params: { [name: string]: string | number }required (if the path contains params)- An object with keys and values for each param in the path.
- For example, if the path is
/task/:id, then theparamsprop must be{ id: 1 }. Wasp supports required and optional params.
-
search: string[][] | Record<string, string> | string | URLSearchParams- Any valid input for
URLSearchParamsconstructor. - For example, the object
{ sortBy: 'date' }becomes?sortBy=date.
- Any valid input for
-
hash: string -
all other props that the
react-router-dom's Link component accepts
routes Objectβ
The routes object contains a function for each route in your app.
exportconst routes ={
// RootRoute has a path like "/"
RootRoute:{
build:(options?:{
search?:string[][]| Record<string,string>|string| URLSearchParams
hash?:string
})=>// ...
},
// DetailRoute has a path like "/task/:id/:userId?"
DetailRoute:{
build:(
options:{
params:{ id: ParamValue; userId?: ParamValue;},
search?:string[][]| Record<string,string>|string| URLSearchParams
hash?:string
}
)=>// ...
},
// OptionalRoute has a path like "/task/:id/details?"
OptionalRoute:{
build:(
options:{
path:'/task/:id/details'|'/task/:id',
params:{ id: ParamValue },
search?:string[][]| Record<string,string>|string| URLSearchParams
hash?:string
}
)=>// ...
},
// CatchAllRoute has a path like "/pages/*"
CatchAllRoute:{
build:(
options:{
params:{'*': ParamValue },
search?:string[][]| Record<string,string>|string| URLSearchParams
hash?:string
}
)=>// ...
},
}
The params object is required if the route contains params. The search and hash parameters are optional.
You can use the routes object like this:
import{ routes }from'wasp/client/router'
const linkToRoot = routes.RootRoute.build()
const linkToTask = routes.DetailRoute.build({ params:{ id:1}})
const linkToOptional = routes.DetailRoute.build({
path:'/task/:id/details',
params:{ id:1},
})
const linkToCatchAll = routes.CatchAllRoute.build({
params:{'*':'about'},
})