You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.4 KiB
62 lines
1.4 KiB
5 years ago
|
import React from 'react';
|
||
|
|
import { Link } from 'bisheng/router';
|
||
|
|
import * as utils from './utils';
|
||
|
|
|
||
|
|
export interface NotFoundProps {
|
||
|
|
location: {
|
||
|
|
pathname: string;
|
||
|
|
search: string;
|
||
|
|
hash: string;
|
||
|
|
state: any;
|
||
|
|
action: string;
|
||
|
|
key: any;
|
||
|
|
basename: string;
|
||
|
|
query: Record<string, string>;
|
||
|
|
};
|
||
|
|
router: {
|
||
|
|
push: (pathname: string) => void;
|
||
|
|
replace: (pathname: string) => void;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const DIRECT_MAP: Record<string, string> = {
|
||
|
|
'docs/spec/download': 'docs/resources',
|
||
|
|
'docs/spec/work-with-us': 'docs/resources',
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function NotFound(props: NotFoundProps) {
|
||
|
|
const {
|
||
|
|
location: { pathname },
|
||
|
|
router,
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
const directLinks = Object.keys(DIRECT_MAP);
|
||
|
|
for (let i = 0; i < directLinks.length; i += 1) {
|
||
|
|
const matchPath = directLinks[i];
|
||
|
|
if (pathname.includes(matchPath)) {
|
||
|
|
router.replace(
|
||
|
|
utils.getLocalizedPathname(`/${DIRECT_MAP[matchPath]}`, utils.isZhCN(pathname)),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div id="page-404">
|
||
|
|
<section>
|
||
|
|
<h1>404!</h1>
|
||
|
|
<p>
|
||
|
|
你要找的页面不存在
|
||
|
|
<Link to={utils.getLocalizedPathname('/', utils.isZhCN(pathname))}>返回首页</Link>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
<style
|
||
|
|
dangerouslySetInnerHTML={{
|
||
|
|
__html: '#react-content { height: 100%; background-color: #fff }',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|