Readings: Routing
Review, Research, and Discussion
- Do child components have direct access to props/state from the parent?
- No.
- When a component “wraps” another component, how does the child component’s output get rendered?
- When adding them as children.
- Can a component, such as
<Content />, which is a child also be used as a standalone component elsewhere in the application?- Yes it can.
- What trick can a parent use to share all props with it’s children?
- By passing a function to it’s children.
Vocabulary
- props.children
- The children, in React, refer to the generic box whose contents are unknown until they’re passed from the parent component.
- It simply means that the component will display whatever is included in between the opening and closing tags while invoking the component. The component would usually be invoked from App component.
-
For further information clicks =>here
- composition
- React Composition is a development pattern based on React’s original component model where we build components from other components using explicit defined props or the implicit children prop.
-
For further information clicks =>here
Preparation
- The Router
-
When starting a new project, you need to determine which type of router to use. For browser based projects, there are
<BrowserRouter>and<HashRouter>components. The<BrowserRouter>should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the<HashRouter>should be used for static websites (where the server can only respond to requests for files that it knows about). -
Usually it is preferable to use a
<BrowserRouter>, but if your website will be hosted on a server that only serves static files, then the<HashRouter>is a good solution. -
Router components only expect to receive a single child element. To work within this limitation, it is useful to create an
<App>component that renders the rest of your application. Separating your application from the router is also useful for server rendering because you can re-use the<App>on the server while switching the router to a<MemoryRouter>.
-
- Routes
- The
<Route>component is the main building block of React Router. Anywhere that you want to only render content based on the location’s pathname, you should use a<Route>element.
- The
- Path
- A
<Route>expects a path prop, which is a string that describes the pathname that the route matches — for example,<Route path='/roster'/>should match a pathname that begins with/roster 2. When the current location’s pathname is matched by the path, the route will render a React element. When the path does not match, the route will not render anything .
- A
- What does the
<Route>render?-
Routes have three props that can be used to define what should be rendered when the route’s path matches. Only one should be provided to a
<Route>element.- **component** — A React component. When a route with a component prop matches, the route will return a new element whose type is the provided React component (created using React.createElement). - **render** — A function that returns a React element 5. It will be called when the path matches. This is similar to component, but is useful for inline rendering and passing extra props to the element. - **children** — A function that returns a React element. Unlike the prior two props, this will always be rendered, regardless of whether the route’s path matches the current location. -
For further information clicks =>here
-
| Read | Title | ToGo |
|---|---|---|
| Read: 01 | Pre-Work - Code 401: Advanced Javascript Development |  |
| Read: 02 | Readings: Express | |
| Read: 03 | Readings: Express REST API | |
| Read: 04 | Readings: Data Modeling | |
| Read: 06 | Readings: Authentication | |
| Read: 07 | Reading: Bearer Authorization | |
| Read: 08 | Reading: Access Control (ACL) | |
| Read: 09 | Reading: OAuth 2 | |
| Read: 11 | Readings: Event Driven Applications | |
| Read: 12 | Readings: Socket.io | |
| Read: 13 | Readings: Message Queues | |
| Read: 14 | Readings: Event Driven Architecture | |
| Read: 16 | Readings: AWS: Cloud Servers | |
| Read: 17 | Readings: AWS: S3 and Lambda | |
| Read: 18 | Readings: AWS: API, Dynamo and Lambda | |
| Read: 18 | Readings: AWS: Events | |
| Read: 26 | Reading: Component Based UI | |
| Read: 27 | Reading: Props and State | |
| Read: 28 | Readings: Component Composition | |
| Read: 29 | Readings: Routing | |
| Read: 31 | Reading: Hooks API | |
| Read: 32 | Reading: Custom Hooks | |
| Read: 33 | Reading: Context API | |
| Read: 34 | Reading: <Login /> and <Auth /> |
|
| Read: 36 | Reading: Application State with Redux | |
| Read: 37 | Readings: Redux - Combined Reducers | |
| Read: 38 | Readings: Redux - Asynchronous Actions | |
| Read: 39 | Readings: Redux - Additional Topics | |