[added] <Link hash> prop

Fixes remix-run#2176

docs/API.md

@@ -85,11 +85,14 @@ A `<Link>` also knows when the route it links to is active and automatically app
 
 #### Props
 ##### `to`
-The path to link to, e.g., `/users/123`.
+The path to link to, e.g. `/users/123`.
 
 ##### `query`
 An object of key:value pairs to be stringified.
 
+##### `hash`
+A hash to put in the URL, e.g. `#a-hash`.
+
 ##### `state`
 State to persist to the `location`.
 

modules/Link.js

@@ -43,12 +43,13 @@ class Link extends React.Component {
   }
 
   static propTypes = {
-    activeStyle: object,
-    activeClassName: string,
-    onlyActiveOnIndex: bool.isRequired,
     to: string.isRequired,
     query: object,
+    hash: string,
     state: object,
+    activeStyle: object,
+    activeClassName: string,
+    onlyActiveOnIndex: bool.isRequired,
     onClick: func
   }
 
@@ -77,16 +78,19 @@ class Link extends React.Component {
   }
 
   render() {
-    const { history } = this.context
-    const { activeClassName, activeStyle, onlyActiveOnIndex, to, query, state, onClick, ...props } = this.props
+    const { to, query, hash, state, activeClassName, activeStyle, onlyActiveOnIndex, ...props } = this.props
 
+    // Manually override onClick.
     props.onClick = (e) => this.handleClick(e)
 
-    // Ignore if rendered outside the context
-    // of history, simplifies unit testing.
+    // Ignore if rendered outside the context of history, simplifies unit testing.
+    const { history } = this.context
     if (history) {
       props.href = history.createHref(to, query)
 
+      if (hash)
+        props.href += hash
+
       if (activeClassName || (activeStyle != null && !isEmptyObject(activeStyle))) {
         if (history.isActive(to, query, onlyActiveOnIndex)) {
           if (activeClassName)

modules/__tests__/Link-test.js

@@ -33,7 +33,7 @@ describe('A <Link>', function () {
   it('knows how to make its href', function () {
     class LinkWrapper extends React.Component {
       render() {
-        return <Link to="/hello/michael" query={{ the: 'query' }}>Link</Link>
+        return <Link to="/hello/michael" query={{ the: 'query' }} hash="#the-hash">Link</Link>
       }
     }
 
@@ -43,7 +43,7 @@ describe('A <Link>', function () {
       </Router>
     ), node, function () {
       const a = node.querySelector('a')
-      expect(a.getAttribute('href')).toEqual('/hello/michael?the=query')
+      expect(a.getAttribute('href')).toEqual('/hello/michael?the=query#the-hash')
     })
   })