diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx
index 21fd3ed74..10f8e6a98 100644
--- a/site/component/Header/index.jsx
+++ b/site/component/Header/index.jsx
@@ -17,6 +17,22 @@ export default class Header extends React.Component {
   constructor(props) {
     super(props);
 
+    this.onScroll = debounce(() => {
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      const clientHeight = document.documentElement.clientHeight;
+      if (scrollTop >= clientHeight) {
+        this.setState({ isFirstFrame: false });
+      } else {
+        this.setState({ isFirstFrame: true });
+      }
+    }, 100);
+
+    this.onDocumentClick = () => {
+      this.setState({
+        menuVisible: false,
+      });
+    };
+
     this.state = {
       menuVisible: false,
       menuMode: 'horizontal',
@@ -25,21 +41,9 @@ export default class Header extends React.Component {
   }
 
   componentDidMount() {
-    window.addEventListener('scroll', debounce(() => {
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-      const clientHeight = document.documentElement.clientHeight;
-      if (scrollTop >= clientHeight) {
-        this.setState({ isFirstFrame: false });
-      } else {
-        this.setState({ isFirstFrame: true });
-      }
-    }, 100));
+    window.addEventListener('scroll', this.onScroll);
 
-    document.addEventListener('click', () => {
-      this.setState({
-        menuVisible: false,
-      });
-    });
+    document.addEventListener('click', this.onDocumentClick);
 
     enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
       match: () => {
@@ -51,6 +55,11 @@ export default class Header extends React.Component {
     });
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll);
+    document.removeEventListener('click', this.onDocumentClick);
+  }
+
   handleMenuIconClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
diff --git a/site/entry/index.jsx b/site/entry/index.jsx
index 0700acc55..831596258 100644
--- a/site/entry/index.jsx
+++ b/site/entry/index.jsx
@@ -52,32 +52,38 @@ ReactDOM.render(
       <Route path="components" component={ReactComponents}>
         {utils.generateIndex(reactComponents)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(reactComponents)}
           component={utils.getChildrenWrapper(reactComponents)} />
       </Route>
       {redirects}
       <Route path="docs/react" component={ReactComponents}>
         {utils.generateIndex(reactComponents)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(reactComponents)}
           component={utils.getChildrenWrapper(reactComponents)} />
       </Route>
       <Route path="docs/practice" component={Practice}>
         {utils.generateIndex(practice)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(practice)}
           component={utils.getChildrenWrapper(practice)} />
       </Route>
       <Route path="docs/pattern" component={Pattern}>
         {utils.generateIndex(pattern)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(pattern)}
           component={utils.getChildrenWrapper(pattern)} />
       </Route>
       <Route path="docs/spec" component={Spec}>
         {utils.generateIndex(spec)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(spec)}
           component={utils.getChildrenWrapper(spec)} />
       </Route>
       <Route path="docs/resource" component={Resource}>
         {utils.generateIndex(resource)}
         <Route path=":children"
+          onEnter={utils.getEnterHandler(resource)}
           component={utils.getChildrenWrapper(resource)} />
       </Route>
     </Route>
diff --git a/site/entry/utils.js b/site/entry/utils.js
index a6bbb466b..dabfdcb43 100644
--- a/site/entry/utils.js
+++ b/site/entry/utils.js
@@ -61,15 +61,30 @@ export function generateIndex(data) {
 const pathToFile = {};
 Object.keys(redirects).forEach((key) => pathToFile[redirects[key]] = key);
 pathToFile['docs/react/changelog'] = './CHANGELOG'; // TODO
+
+function getDoc(data, props) {
+  const trimedPathname = props.location.pathname.replace(/^\//, '');
+  const processedPathname = pathToFile[trimedPathname] || trimedPathname;
+  const doc = data[`${processedPathname}.md`] ||
+          data[`${processedPathname}/index.md`];
+  return doc;
+}
+
 export function getChildrenWrapper(data) {
   return function childrenWrapper(props) {
-    const trimedPathname = props.location.pathname.replace(/^\//, '');
-    const processedPathname = pathToFile[trimedPathname] || trimedPathname;
-    const doc = data[`${processedPathname}.md`] ||
-            data[`${processedPathname}/index.md`];
+    const doc = getDoc(data, props);
     const hasDemos = demosList[doc.meta.fileName];
     return !hasDemos ?
       <Article {...props} content={doc} /> :
       <ComponentDoc {...props} doc={doc} />;
   };
 }
+
+export function getEnterHandler(data) {
+  return function handleEnter(nextState, replace) {
+    const doc = getDoc(data, nextState);
+    if (!doc) {
+      replace('/404');
+    }
+  };
+}