23 Jun 2024

Weblab notes: React route

This is a personal note for the web.lab lectures.

1. Router

use the Reach Reach Router library

URL -> Router -> render different components

1: <App>
2:   // conditional rendering based on curren url
3:   <Router>
4:     <Home path="/" /> // root path
5:     <Dashboard path="dashboard" /> // relative to the current URL
6:     <Team path="/team" /> // absolute path: root path + "/team"
7:     <NotFound default />
8:   </Router>
9: </App>;

2. Link

relative: <Link to="newpage">Click me</Link>
absolute: <Link to="/newpage">Click me</Link>

3. Workshop 3

3.1. Structure

Figure 1: The Catbook structure in workshop 3

3.2. States

name	states
Feed	`stories`: a list of stories
Card	`comments`: a list of comments for a story id

3.3. Props

index	props
1	a function to update `stories`
2	all attributes in a story
3	the attributes used to display a story
4	a story id; a list of comments under the story; a function to update `comments`
5	all attributes in a comment
6	a comment id; the function to update `comments`

3.4. Why passing down the update function in props 1, 4, 6?

To share the parent states, i.e., stories and comments to child component. Since the post action happens in the child component, we need a way to automatically update the states to see new contents immediately.