Route Params

πŸ‘¨β€πŸ’Ό It wouldn't make much sense if we needed to make a new route for every single user. Instead, we can use a route parameter to capture the username and use it in our route handler. We typically call these "params".
With the file-based route convention we're using, we define params by using a $-prefixed filename segment. For example:
Route File ExampleParamsExample Path
app/routes/ships.$shipId.tsx$shipId/ships/1234
app/routes/bookings+/$bookingId.tsx$bookingId/bookings/1234
app/routes/chats+/$chatId.messages.tsx$chatId/chats/1234/messages
🐨 So in this exercise, let's rename our files and folders from using kody to use the $username and from some-note-id to $noteId params and instead of rendering "Kody" we can render the username from params as well as the noteId.
πŸ’° You can get the param value from useParams() which you can import from @remix-run/react. For example:
import { useParams } from '@remix-run/react'

export default function PetRoute() {
	const params = useParams()
	return <h1>Hello {params.petName}</h1>
}
Once you've finished with that, you should be able to go to any username and it will display that username. Here are some to try:
And then for the note:

Please set the playground first

Loading "Route Params"
Loading "Route Params"
Login to get access to the exclusive discord channel.
  • general
    Modals / Dialogs
    Lucas Wargha πŸš€ 🌌:
    It seems like modals and dialogs are becoming a hot topic on my team lately. I haven’t found a solid...
    3 Β· a day ago
  • πŸ”­foundations
    Prefetching not working?
    Justin Toman πŸ†:
    I'm on 05. Scripting / 04. Prefetching I have the exact solution running (0 diff), I've restarted t...
    • βœ…1
    2 Β· 2 months ago
  • general
    epic stack website initial load at home page is unstyled (sometimes)
    osmancakir πŸš€ 🌌:
    Sometimes (especially when it is loaded first time on a new browser etc.) I see this unstyled versio...
    • βœ…1
    10 Β· 3 months ago
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    86 Β· 2 years ago
  • general
    Resource / Api endpoints on epic stack / RR7
    Lucas Wargha πŸš€ 🌌:
    Hi everyone! Quick question for those using the Epic Stack: How are you handling resource routes ...
    • βœ…1
    2 Β· 2 months ago
  • general
    Epic stack using tanstack form
    Lucas Wargha πŸš€ 🌌:
    https://github.com/epicweb-dev/epic-stack/compare/epicweb-dev:main...wargha:feature/tanstack-form-ex...
    • βœ…1
    3 Β· 2 months ago
  • general
    Init command outdated on the EpicWeb website
    Virgile πŸ† 🌌:
    Hi everyone. I've initialized a new epic-stack project yesterday. Following instructions from http...
    • βœ…1
    3 Β· 2 months ago
  • general
    Mark as complete, resets the first time you click it.
    Daniel V.C πŸš€ 🌌:
    Not sure if anyone else has had this issue, as i've not seen anyone else talk about it, but I find ...
    • βœ…1
    8 Β· 3 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· a year ago
  • general
    Keeping Epic Stack Projects Free on Fly – Any Tips?
    Lucas Wargha πŸš€ 🌌:
    I’ve been experimenting with the Epic Stack and deploying some dummy projects on Fly. I noticed that...
    • βœ…1
    0 Β· 3 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    Creating Notes
    Scott 🌌 πŸ†:
    Does anybody know in what workshop we create notes? I would like to see the routing structure. So fa...
    • βœ…1
    2 Β· 5 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Thank you for the inspiration
    Binalfew πŸš€ 🌌:
    <@105755735731781632> I wanted to thank you for the incredible knowledge I gained from your Epic Web...
    • ❀️1
    1 Β· 5 months ago
  • πŸ”­foundations
    git push returns 400
    mohdelle 🌌:
    when i try to start a fresh epic stack project and push to remote it's going to an error. anyone els...
    • βœ…1
    3 Β· 7 months ago
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· 8 months ago
  • πŸ”­foundations
    Progessive Enhancement - React .map
    Scott 🌌 πŸ†:
    I'm reviewing Foundations --> Scripting --> Scripts. I'm wondering how the `.map` works (iterating...
    • βœ…1
    1 Β· 8 months ago
  • πŸ”­foundations
    Parent Data - SEO - Typescript concept help
    remich 🌌:
    I'm relatively new to TS, and I can see the value that Kent is talking about with the second argumen...
    • βœ…1
    1 Β· 10 months ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    Reviewing foundations, Mutations, Actions
    silvanet πŸš€ 🌌:
    Forgive me for this. I went over the file size limit. I don't want to sign up for being able to exce...
    • βœ…1
    2 Β· a year ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 10 months ago
  • πŸ”­foundations
    Styling 05 workshop error: Expected component `CodeFile` to be defined
    jocosage 🌌:
    Is this error intended behaviour, it doesn't look so as in the git repo there seems to be instructio...
    • βœ…1
    3 Β· 9 months ago
  • πŸ”­foundations
    Foundations Review
    Baghira 🌌:
    I finished the foundations workshop. I liked the SEO part and error handling part. Remix built-in to...
    • βœ…2
    1 Β· 9 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· 2 years ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· 2 years ago
  • πŸ”­foundations
    Progressive Enhancement & Client Side Scripting
    Chwizdo 🌌:
    I'm currently just starting at foundations | scripting part, and until now, I've heard KCD mentioned...
    • βœ…1
    4 Β· 2 years ago
  • πŸ”­foundations
    Unable to push my changes to Github
    Sachin Purohit 🌌:
    When trying to push changes, I am getting the below error- remote: fatal: did not receive expecte...
    • βœ…1
    3 Β· a year ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· a year ago
  • πŸ”­foundations
    How to fetch data on client (e.g. Combobox)
    QzCurious 🌌 πŸš€:
    After learning from epic web, I'm really into SSR data fetching pattern. I'm now doing SSR all of m...
    • βœ…1
    2 Β· a year ago
  • πŸ”­foundations
    @remix-run/react vs @remix-run/node
    mustak πŸš€ 🌌:
    Module: Search Engine Optimization Exercise: Meta Overrides There are 2 different imports for type ...
    • βœ…1
    2 Β· a year ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    How can I do this?
    silvanet πŸš€ 🌌:
    Viewing the Intro (from the Workshop) for Mutations, the course has an embedded video where Kent exp...
    • βœ…1
    3 Β· a year ago
  • πŸ”­foundations
    remix flat routes
    mustak πŸš€ 🌌:
    Can someone give me a quick explanation of the following: ```markdown ## underscores with files _fi...
    • βœ…1
    2 Β· a year ago
  • πŸ”­foundations
    How to launch VS Code editor from File links in app using wsl2?
    mustak πŸš€ 🌌:
    I've tried setting environment variables in .env: ```js KCDSHOP_EDITOR=code ``` and ```js KCDSHOP_ED...
    • βœ…1
    5 Β· a year ago
  • πŸ”­foundations
    Meta function not being called
    juliano.brasil 🌌:
    Hi. I'm checking the assets on the foundations module, and something is somehow not working for me (...
    • βœ…1
    7 Β· a year ago