|
| 1 | +# Routes And Layouts |
| 2 | + |
| 3 | +The goal of this practice is to make files for these routes: |
| 4 | + |
| 5 | +```js |
| 6 | +// URL SUB LAYOUT CONTENT |
| 7 | +// localhost:3000 CommonLayout "Home Page" |
| 8 | +// localhost:3000/contact CommonLayout "Contact" |
| 9 | +// localhost:3000/auth/login AuthLayout "Login" |
| 10 | +// localhost:3000/auth/register AuthLayout "Register" |
| 11 | +// localhost:3000/products ProductsLayout "Browse Products" |
| 12 | +// localhost:3000/products/1 ProductsLayout "Product Profile: 1" |
| 13 | +// localhost:3000/products/special ProductsLayout "Special Product Profile" |
| 14 | +``` |
| 15 | + |
| 16 | +## Task 1 |
| 17 | + |
| 18 | +The only file you'll edit is `routes.tsx` |
| 19 | + |
| 20 | +Each URL the user can visit loads a page, that page will be built from three files: The main layout, a sub-layout, and the page itself. Above you can see which URL someone will visit to see each sub-layout they'll get. All pages and layouts are already made, you just need to assemble the router in `routes.ts`. |
| 21 | + |
| 22 | +Sub layouts are color coded as follows so you can visually see your success: |
| 23 | + |
| 24 | +Gray - Common Layout |
| 25 | +Green - AuthLayout |
| 26 | +Blue - Product Layout |
| 27 | + |
| 28 | +React Router lets you nest your routing instructions as follows. This example is taken from their docs so lets not assume their file names match up to ours: |
| 29 | + |
| 30 | +```ts |
| 31 | +import { type RouteConfig, route, index, layout, prefix } from '@react-router/dev/routes' |
| 32 | + |
| 33 | +export default [ |
| 34 | + index('./home.tsx'), |
| 35 | + route('about', './about.tsx'), |
| 36 | + |
| 37 | + layout('./auth/layout.tsx', [ |
| 38 | + route('login', './auth/login.tsx'), |
| 39 | + route('register', './auth/register.tsx'), |
| 40 | + ]), |
| 41 | +] satisfies RouteConfig |
| 42 | +``` |
| 43 | + |
| 44 | +Most routes will use the `route()` function in real life. With it, you're simply saying if you visit _this path_ you get _this file_: |
| 45 | + |
| 46 | +```ts |
| 47 | +route('this-path', './this-file.tsx') |
| 48 | +``` |
| 49 | + |
| 50 | +But some sites will use a hierarchy of layouts. To put your page in a layout, wrap its route in the `layout()` function: |
| 51 | + |
| 52 | +```ts |
| 53 | +layout('./some-layout.tsx', [ |
| 54 | + route('page-one', './one.tsx') |
| 55 | + route('page-two', './two.tsx') |
| 56 | + route('page-three', './three.tsx') |
| 57 | +]) |
| 58 | +``` |
| 59 | + |
| 60 | +Layouts don't add anything to the URL. So in this example above, someone would visit `site.com/page-one` and that page would nest inside the `some-layout.tsx` file. But what if you wanted a nested layout AND for a path to be added to the URL like `site.com/path/page-one`? Then use nested `route()` instead |
| 61 | + |
| 62 | +```ts |
| 63 | +route('path', './some-layout.tsx', [ |
| 64 | + route('page-one', './one.tsx') // <--- Now someone can visit /path/page-one in the URL and get this page |
| 65 | + route('page-two', './two.tsx') |
| 66 | + route('page-three', './three.tsx') |
| 67 | +]) |
| 68 | +``` |
| 69 | + |
| 70 | +Now with this example, people can go to `/path/page....` but they can't go to `/path` because we don't have a main index page for it. For that we'll use `index()`: |
| 71 | + |
| 72 | +```ts |
| 73 | +route('path', './some-layout.tsx', [ |
| 74 | + index('/index.tsx') // <--- Now someone can visit /path in the URL and get this page |
| 75 | + route('page-one', './one.tsx') |
| 76 | + route('page-two', './two.tsx') |
| 77 | + route('page-three', './three.tsx') |
| 78 | +]) |
| 79 | +``` |
| 80 | + |
| 81 | +## Final |
| 82 | + |
| 83 | +Remember, for this and all practices, there's a `final` version for you to review if you need to with all the answers. In this case, the final is in `practice-final`. |
0 commit comments