不知道为什么我会收到以下错误。
Uncaught TypeError: Object(...) is not a function
at Redirect.componentDidUpdate (Redirect.js:42)
我的 routeInterceptor 组件的渲染方法:
render() {
const { forbidden, notFound } = this.state;
const { authed } = this.props;
// const { location } = this.props;
// const { pathname } = location;
console.log('this.props', this.props);
console.log('authed', authed);
// If authentication is complete, but the user is not logged in,
// redirect to the login view.
/*
Problem starts here, if I move the forbidden logic above this
Everything works, however the user is then always redirected to the
forbidden page instead of login
*/
if (authed === false) return <Redirect to="/login" />;
// If user is logged in and accesses an unathenticated view,
// redirect to the Products view.
if (authed === true) return <Products />;
// if (forbidden && pathname !== '/login') return <Forbidden />;
if (forbidden) return <Forbidden />;
if (notFound) return <NotFound />;
return <Loading />;
}
代码在 Redirect 组件内中断的地方:
Redirect.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
var prevTo = createLocation(prevProps.to); // <- This line.
var nextTo = createLocation(this.props.to);
if (locationsAreEqual(prevTo, nextTo)) {
warning(false, 'You tried to redirect to the same route you\'re currently on: ' + ('"' + nextTo.pathname + nextTo.search + '"'));
return;
}
this.perform();
};
这是包createLocation
的一部分的history
实现:
https://github.com/ReactTraining/history/blob/master/modules/LocationUtils.js
这是日志prevProps
:
知道这里可能出了什么问题吗?
这是 LocationUtils.js 的所有代码,它是历史的一部分并包含该createLocation
函数。
import resolvePathname from "resolve-pathname";
import valueEqual from "value-equal";
import { parsePath } from "./PathUtils";
export const createLocation = (path, state, key, currentLocation) => {
let location;
if (typeof path === "string") {
// Two-arg form: push(path, state)
location = parsePath(path);
location.state = state;
} else {
// One-arg form: push(location)
location = { ...path };
if (location.pathname === undefined) location.pathname = "";
if (location.search) {
if (location.search.charAt(0) !== "?")
location.search = "?" + location.search;
} else {
location.search = "";
}
if (location.hash) {
if (location.hash.charAt(0) !== "#") location.hash = "#" + location.hash;
} else {
location.hash = "";
}
if (state !== undefined && location.state === undefined)
location.state = state;
}
try {
location.pathname = decodeURI(location.pathname);
} catch (e) {
if (e instanceof URIError) {
throw new URIError(
'Pathname "' +
location.pathname +
'" could not be decoded. ' +
"This is likely caused by an invalid percent-encoding."
);
} else {
throw e;
}
}
if (key) location.key = key;
if (currentLocation) {
// Resolve incomplete/relative pathname relative to current location.
if (!location.pathname) {
location.pathname = currentLocation.pathname;
} else if (location.pathname.charAt(0) !== "/") {
location.pathname = resolvePathname(
location.pathname,
currentLocation.pathname
);
}
} else {
// When there is no prior location and pathname is empty, set it to /
if (!location.pathname) {
location.pathname = "/";
}
}
return location;
};
export const locationsAreEqual = (a, b) =>
a.pathname === b.pathname &&
a.search === b.search &&
a.hash === b.hash &&
a.key === b.key &&
valueEqual(a.state, b.state);