StaticRouter.js
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React from "react";
import PropTypes from "prop-types";
import { createLocation, createPath } from "history";
import invariant from "tiny-invariant";
import warning from "tiny-warning";
import Router from "./Router.js";
function addLeadingSlash(path) {
return path.charAt(0) === "/" ? path : "/" + path;
}
function addBasename(basename, location) {
if (!basename) return location;
return {
...location,
pathname: addLeadingSlash(basename) + location.pathname
};
}
function stripBasename(basename, location) {
if (!basename) return location;
const base = addLeadingSlash(basename);
if (location.pathname.indexOf(base) !== 0) return location;
return {
...location,
pathname: location.pathname.substr(base.length)
};
}
function createURL(location) {
return typeof location === "string" ? location : createPath(location);
}
function staticHandler(methodName) {
return () => {
invariant(false, "You cannot %s with <StaticRouter>", methodName);
};
}
function noop() {}
/**
* The public top-level API for a "static" <Router>, so-called because it
* can't actually change the current location. Instead, it just records
* location changes in a context object. Useful mainly in testing and
* server-rendering scenarios.
*/
class StaticRouter extends React.Component {
navigateTo(location, action) {
const { basename = "", context = {} } = this.props;
context.action = action;
context.location = addBasename(basename, createLocation(location));
context.url = createURL(context.location);
}
handlePush = location => this.navigateTo(location, "PUSH");
handleReplace = location => this.navigateTo(location, "REPLACE");
handleListen = () => noop;
handleBlock = () => noop;
render() {
const { basename = "", context = {}, location = "/", ...rest } = this.props;
const history = {
createHref: path => addLeadingSlash(basename + createURL(path)),
action: "POP",
location: stripBasename(basename, createLocation(location)),
push: this.handlePush,
replace: this.handleReplace,
go: staticHandler("go"),
goBack: staticHandler("goBack"),
goForward: staticHandler("goForward"),
listen: this.handleListen,
block: this.handleBlock
};
return <Router {...rest} history={history} staticContext={context} />;
}
}
if (__DEV__) {
StaticRouter.propTypes = {
basename: PropTypes.string,
context: PropTypes.object,
location: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
};
StaticRouter.prototype.componentDidMount = function() {
warning(
!this.props.history,
"<StaticRouter> ignores the history prop. To use a custom history, " +
"use `import { Router }` instead of `import { StaticRouter as Router }`."
);
};
}
export default StaticRouter;