Merge pull request #4 from malkrc/gophers-frontend

added routing
chaoss · Dec 6, 2020 · 7b34b36 · 7b34b36
2 parents e324497 + edc1838
commit 7b34b36
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 2 deletions.
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -10,6 +10,8 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "web-vitals": "^0.2.4"
   },

diff --git a/react/src/App.js b/react/src/App.js
@@ -10,21 +10,29 @@ import GopherRepoGroup from './GopherRepoGroup'
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { Row } from 'react-bootstrap';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 function App() {
   return (
     <div className="App">
       {/* <Container> */}
         <Row>
+        <Router>
         <Col xs={3}>
 
         <Nav defaultActiveKey="/home" className="flex-column">
           <Nav.Link href="/home">Active</Nav.Link>
-          <Nav.Link eventKey="link-1">Link</Nav.Link>
+          <Link to='/groups'>Groups</Link>
           <Nav.Link eventKey="link-2">Link</Nav.Link>
           <Nav.Link eventKey="disabled" disabled>
             Disabled
           </Nav.Link>
         </Nav>
+
         </Col>
         <Col>
         <InputGroup size="lg">
@@ -33,7 +41,20 @@ function App() {
     </InputGroup.Prepend>
     <FormControl aria-label="Large" aria-describedby="inputGroup-sizing-sm" />
   </InputGroup>
-      <GopherRepoGroup></GopherRepoGroup>
+
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+          <Route path="/groups">
+            <GopherRepoGroup />
+          </Route>
+
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+
+      {/* <GopherRepoGroup></GopherRepoGroup> */}
         {/* <CardDeck>
         <Card style={{ width: '18rem' }}>
           <Card.Body>
@@ -47,10 +68,16 @@ function App() {
       </Card>
       </CardDeck> */}
       </Col>
+      </Router>
       </Row>
     {/* </Container> */}
     </div>
   );
 }
 
 export default App;
+
+
+function Home() {
+  return <h2>Home</h2>;
+}