site: fix target demo highlight, close: #4545

site/theme/template/Content/ComponentDoc.jsx

@@ -41,20 +41,19 @@ export default class ComponentDoc extends React.Component {
             demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
     showedDemo.sort((a, b) => a.meta.order - b.meta.order)
       .forEach((demoData, index) => {
+        const demoElem = (
+          <Demo
+            {...demoData}
+            key={demoData.meta.filename}
+            utils={props.utils}
+            expand={expand}
+            location={location}
+          />
+        );
         if (index % 2 === 0 || isSingleCol) {
-          leftChildren.push(
-            <Demo {...demoData}
-              key={demoData.meta.filename} utils={props.utils}
-              expand={expand} pathname={location.pathname}
-            />
-          );
+          leftChildren.push(demoElem);
         } else {
-          rightChildren.push(
-            <Demo {...demoData}
-              key={demoData.meta.filename} utils={props.utils}
-              expand={expand} pathname={location.pathname}
-            />
-          );
+          rightChildren.push(demoElem);
         }
       });
     const expandTriggerClass = classNames({

site/theme/template/Content/Demo.jsx

@@ -22,10 +22,21 @@ export default class Demo extends React.Component {
     return (this.state.codeExpand || this.props.expand) !== (nextState.codeExpand || nextProps.expand);
   }
 
+  componentDidMount() {
+    const { meta, location } = this.props;
+    if (meta.id === location.hash.slice(1)) {
+      this.anchor.click();
+    }
+  }
+
   handleCodeExapnd = () => {
     this.setState({ codeExpand: !this.state.codeExpand });
   }
 
+  saveAnchor = (anchor) => {
+    this.anchor = anchor;
+  }
+
   render() {
     const props = this.props;
     const {
@@ -70,7 +81,7 @@ export default class Demo extends React.Component {
         </section>
         <section className="code-box-meta markdown">
           <div className="code-box-title">
-            <a href={`#${meta.id}`}>
+            <a href={`#${meta.id}`} ref={this.saveAnchor}>
               {localizedTitle}
             </a>
             <EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={meta.filename} />