Code 401: Class 29 - Routing

Questions

Do child components have direct access to props/state from the parent? Yes, via this.props
When a component “wraps” another component, how does the child component’s output get rendered? Child components conditionally render UI based on the state passed to them from the wrapping component
Can a component, such as <Content />, which is a child also be used as a standalone component elsewhere in the application? Stateless components can be rendered by other parent components
What trick can a parent use to share all props with it’s children? Using the spread operator allows all of a parents props to be passed to its child

props.children A property of a parent component that shows all of its children components, can be used render all children
composition Is how one can build components from other components allowing for differing complexity and specialization

Install $npm i react-router-dom
import { BrowserRouter } from 'react-router-dom';
<Browser Router> should be used for dynamic websites
<HashRouter> should be used for static sites
Each router creates a history object used to keep track of current location
Routers only expect a single child, so build an App component to render the other children

useHistory hook gives access to the history instance used to navigate
useLocation hook returns location object representing the current URL
useParams returns an object of key/value pairs of URL parameters
useRouteMatch hook attempts to match current URL
<Route> component is the most important, its job is to render some content when a path matches the current URL
Routes without a path always match