Skip to content

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

/

...

/

5. React Router

5. React Router

In the previous 5 section, we have created:

pure JSX files

transform to browser-compatible JS with Babel

install Webpack, transform JSX, SCSS, CSS (no need for stand-alone Babel)

styling with CSS

We could use create-react-app to do all those things

installed Webpack with Babel (no more babel or webpack config files)

manifest.json which is allow our web app to become PWA (support for offline mode)

serviceWorker.js - manage notification and offline

Server-side Routing vs Client-side Routing

⁠

Screen Shot 2022-03-17 at 2.15.49 PM.png

⁠

⁠

React Router can be used more than just the web

Android, iOS app (native)

Learn more at

React v5

⁠

https://v5.reactrouter.com/web/guides/quick-start⁠

⁠

⁠

https://create-react-app.dev/docs/adding-a-router/⁠

⁠

Install

npm i react-router-dom

npm install --save react-router-dom

Create-react-app does not come with Router installed

⁠

https://create-react-app.dev/docs/adding-a-router/⁠

⁠

Import 2 components

BrowserRouter

Route

BrowserRouter component requires only 1 nested element inside

you have to add another DIV to add many routes inside

const routes = (

<BrowserRouter>

<div>

<Route path="/" component={AppIndex} exact={true} />

<Route path="/about" component={About} exact={true} />

</div>

</BrowserRouter>

)

we use exact={true} to force React to render correct components

Config devServer to only server index.js, not entire URL

because by default, the browser will render the URL from server side

devServer: {

historyApiFallback: false

}

So, the index.js file should render routes, not App

Setup 404

⁠

https://v5.reactrouter.com/web/api/Switch⁠

Import Switch

import { Route, Switch } from "react-router";

let routes = (

<Switch>

<Route exact path="/"><Home /></Route>

<Route path="/about"><About /></Route>

<Route path="/:user"><User /></Route>

<Route><NoMatch /></Route> // 404 here

</Switch>

);

Linking between Routes

If you add href link, the whole page will be reloaded

you have to use <Link> router for linking

Read more

https://v5.reactrouter.com/web/api/Link⁠

⁠

<a href="/">Home</a>

<Link to="/"></Link>

Header / Nav inside Router

What the heck...

Render body in components

Render header inside routes

Read more about NavLink

https://v5.reactrouter.com/web/api/NavLink⁠

<NavLink to="/" activeClassName="is-active"></NavLink>

Organize Routes

src / routers

AppRouter.js - export all react components

Render AppRouter instead of app

src / components

Query String

hash - /about#anchor

path - /about

query - /about?query=abc

query - /about/:id

Connnected components can access via

props.match.params.id

props.match.params.pathname

props.match.params.hash

props.match.params.query

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.