Add hooks to documentation website

remix-run · Sep 23, 2019 · 3debcd4 · 3debcd4
1 parent 0721144
commit 3debcd4
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 234 deletions.
diff --git a/packages/react-router/docs/api/hooks.md b/packages/react-router/docs/api/hooks.md
@@ -1,6 +1,8 @@
 # Hooks
 
-React Router ships with a few hooks that let you access the state of the router in your components.
+React Router ships with a few [hooks](https://reactjs.org/docs/hooks-intro.html) that let you access the state of the router and perform navigation from inside your components.
+
+Please note: You need to be using React >= 16.8 in order to use any of these hooks!
 
 - [`useHistory`](#usehistory)
 - [`useLocation`](#uselocation)

diff --git a/website/modules/components/Environment.js b/website/modules/components/Environment.js
@@ -26,34 +26,32 @@ export default function Environment({
     Object.keys(envData).forEach(key => envData[key](() => {}));
   }, []);
 
-  if (!envData[environment]) {
-    return <Redirect to="/" />;
-  } else {
-    return (
-      <SmallScreen>
-        {isSmallScreen => (
-          <Bundle load={envData[environment]}>
-            {data =>
-              data ? (
-                isSmallScreen ? (
-                  <EnvironmentSmall
-                    data={data}
-                    match={match}
-                    location={location}
-                    history={history}
-                  />
-                ) : (
-                  <EnvironmentLarge data={data} match={match} />
-                )
+  if (!envData[environment]) return <Redirect to="/" />;
+
+  return (
+    <SmallScreen>
+      {isSmallScreen => (
+        <Bundle load={envData[environment]}>
+          {data =>
+            data ? (
+              isSmallScreen ? (
+                <EnvironmentSmall
+                  data={data}
+                  match={match}
+                  location={location}
+                  history={history}
+                />
               ) : (
-                <Loading />
+                <EnvironmentLarge data={data} match={match} />
               )
-            }
-          </Bundle>
-        )}
-      </SmallScreen>
-    );
-  }
+            ) : (
+              <Loading />
+            )
+          }
+        </Bundle>
+      )}
+    </SmallScreen>
+  );
 }
 
 Environment.propTypes = {

diff --git a/website/modules/components/EnvironmentHeader.js b/website/modules/components/EnvironmentHeader.js
@@ -34,19 +34,19 @@ Tab.propTypes = { to: PropTypes.string };
 function Tabs() {
   return (
     <Row boxShadow="0px 1px 1px hsla(0, 0%, 0%, 0.15)" margin="10px">
-      <Tab to="/web" borderTopLeftRadius="3px" borderBottomLeftRadius="3px">
-        Web
+      <Tab to="/core" borderTopLeftRadius="3px" borderBottomLeftRadius="3px">
+        Core
       </Tab>
-      <Tab to="/native" marginLeft="-1px">
-        Native
+      <Tab to="/web" marginLeft="-1px">
+        Web
       </Tab>
       <Tab
-        to="/core"
+        to="/native"
         marginLeft="-1px"
         borderTopRightRadius="3px"
         borderBottomRightRadius="3px"
       >
-        Core
+        Native
       </Tab>
     </Row>
   );