【路由】：路由那些事——中

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

/*
 * 参数（Parameters）
 * The path argument is used to define parameters and populate keys.
 */

// 具名参数
const p1 = pathToRegexp("/foo/:bar");
console.log(p1, p1.exec("/foo/xyz"));
console.log("-----------------------");

const p2 = pathToRegexp("/:foo/:bar");
console.log(p2, p2.exec("/test/route"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

// 自定义参数
const p3 = pathToRegexp("/icon-:foo(\\d+).png");
console.log(p3, p3.exec("/icon-123.png"));
console.log(p3, p3.exec("/icon-abc.png"));
console.log("-----------------------");

const p4 = pathToRegexp("/(user|u)");
console.log(p4, p4.exec("/u"));
console.log(p4, p4.exec("/users"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

// Parameters can be wrapped in {} 
// to create custom prefixes or suffixes for your segment:
const p5 = pathToRegexp("/:attr1?{-:attr2}?{-:attr3}?");
console.log(p5, p5.exec("/"));
console.log(p5, p5.exec("/test"));
console.log(p5, p5.exec("/test-test"));
console.log("-----------------------");

const p6 = pathToRegexp("/:attr1{-:attr2}{-:attr3}");
console.log(p5, p5.exec("/test1-test2-test3"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

// 无名参数
// It is possible to write an unnamed parameter 
// that only consists of a regexp. 
// It works the same the named parameter, 
// except it will be numerically indexed:
const p7 = pathToRegexp("/:foo/(.*)");
console.log(p7, p7.exec("/test/route"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

/*
 * 修饰符
 * Modifiers must be placed after the parameter 
 * (e.g. /:foo?, /(test)?, /:foo(test)?, or {-:foo(test)}?).
 */

// "Optional" 修饰符
// Parameters can be suffixed with a question mark (?) 
// to make the parameter optional.
const p8 = pathToRegexp("/:foo/:bar?");
console.log(p8, p8.exec("/test"));
console.log(p8, p8.exec("/test/route"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

// "Zero or more" 修饰符
// Parameters can be suffixed with an asterisk (*) 
// to denote a zero or more parameter matches.
const p9 = pathToRegexp("/:foo*");
console.log(p9, p9.exec("/"));
console.log(p9, p9.exec("/bar/baz"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

// "Zero or more" 修饰符
// Parameters can be suffixed with an asterisk (*) 
// to denote a zero or more parameter matches.
const p9 = pathToRegexp("/:foo*");
console.log(p9, p9.exec("/"));
console.log(p9, p9.exec("/bar/baz"));
console.log(p9, p9.exec("/bar/baz/xyz"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

// "One or more" 修饰符
// Parameters can be suffixed with a plus sign (+) 
// to denote a one or more parameter matches.
const p10 = pathToRegexp("/:foo+");
console.log(p10, p10.exec("/"));
console.log(p10, p10.exec("/bar/baz"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");

/*
 * 匹配（match）
 * The match function will return a function for transforming paths into parameters:
 */
// Make sure you consistently `decode` segments.
const fn = match("/user/:id", { decode: decodeURIComponent });
console.log(fn("/user/123") );
console.log(fn("/invalid"));
console.log(fn("/user/caf%C3%A9"));
console.log("-----------------------");

const { pathToRegexp, match, parse, compile } = require("path-to-regexp");
/*
 * Compile ("Reverse" Path-To-RegExp)
 * The compile function will return a function for transforming parameters into a valid path:
 */
// Make sure you encode your path segments consistently.
const toPath = compile("/user/:id", { encode: encodeURIComponent });

console.log(toPath({ id: 123 }));
console.log(toPath({ id: "café" }));
console.log(toPath({ id: "/" }));
console.log(toPath({ id: ":/" }));

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// Get the current location.
const location = history.location;

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
  // location is an object like window.location
  console.log(action, location.pathname, location.state);
});

// Use push, replace, and go to navigate around.
history.push('/home', { some: 'state' });

// To stop listening, call the function returned from listen().
unlisten();

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/index.js