Wei-Yu Chen wei-yuuuu

Composing `<Route>` in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.

This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.

Background

In React Router v5, we had an example of how you could create a element](https://github.com/remix-run/react-router/blob/320be7afe44249d5c025659bc00c3276a19f0af9/packages/react-router-dom/examples/Auth.js#L50-L52) to restrict access to certain routes on the page. This element was a simple [wrapper around an actual element that made a simple decision: is the user authenticated or not? If so, ren

Redirects in React Router v6

An important part of "routing" is handling redirects. Redirects usually happen when you want to preserve an old link and send all the traffic bound for that destination to some new URL so you don't end up with broken links.

The way we recommend handling redirects has changed in React Router v6. This document explains why.

Background

In React Router v4/5 (they have the same API, you can read about why we had to bump the major version here) we had a <Redirect> component that you could use to tell the router when to automatically redirect to another URL. You might have used it like this:

前言

這是 Oct. 28 ~ Nov. 01, 2020 間於推特上舉辦的趣味面試挑戰，四天期間共 517 人次閱讀、42 人 fork sandbox，最後收到九份回答，如果這是正式面試，將錄取 5 人、備取 1 人、拒絕 3 人，也就是成功率約六成。

先說結論

面試時別急著跳進去回答問題，先拉高層次觀察問題的形狀，搞清楚 root cause 後再思考答案與解法
過程中多詢問主考官真正想達到的目地、目前為何採取此手法、現在的做法是否遇到困難、有無解法上的限制(time, mem, cpu bound)

	import { useEffect, useRef } from 'react';

	// CONFIG

	const WIDTH = 660;
	const HEIGHT = 440;

	const COLUMN_WIDTH = 20;
	const COLUMNS = WIDTH / COLUMN_WIDTH;

	/* Ultra lightweight Github REST Client */
	// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
	const token = 'github-token-here'
	const githubClient = generateAPI('https://api.github.com', {
	headers: {
	'User-Agent': 'xyz',
	'Authorization': `bearer ${token}`
	}
	})

	/* Using a JavaScript proxy for a super low code REST client */
	// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
	// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
	// also see https://github.com/fastify/manifetch
	// also see https://github.com/flash-oss/allserver
	// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

	const createApi = (url) => {
	return new Proxy({}, {
	get(target, key) {

	import { useState, useEffect, useRef, useMemo } from 'react'

	export default function Wordle() {
	let [currentAttempt, setCurrentAttempt] = useState('')
	let [bestColors, setBestColors] = useState(() => new Map())
	let [history, setHistory] = usePersistedHistory(h => {
	waitForAnimation(h)
	})

	useEffect(() => {

	import qualified Data.Set as S
	import Data.Set (Set)
	import Data.Char (isLower)
	import Data.Ord (comparing, Down (Down))
	import Data.List (sortBy, subsequences, minimumBy, maximumBy)
	import Control.Monad.Trans.Writer.CPS
	import Data.Monoid
	import Data.Foldable (traverse_)

	wordFilter :: String -> Bool

	<div id="screen">
	<h1>Wordle</h1>
	<div id="grid"></div>
	<div id="keyboard"></div>
	</div>
	<style>
	body, html {
	background: #111;
	color: white;
	font-family: sans-serif;

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="canvas"></div>
	<button id="restart">Restart</button>
	<script src="minesweeper.js"></script>
	<style>
	* {

Wei-Yu Chen wei-yuuuu

Composing <Route> in React Router v6

Background

Redirects in React Router v6

Background

前言

先說結論

Composing `<Route>` in React Router v6