Setup correct routing for patterns list and each pattern

Author: zoltantothcom

src/Layout.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Route, withRouter } from 'react-router-dom';
+import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { connect } from 'react-redux';
 import styleLight from './styles/hljs/hljs.light';
@@ -32,9 +32,12 @@ const Layout = props => {
         <GlobalStyle mode={mode} />
         <Header />
 
-        <Route exact path="/" render={() => <Game style={style} />} />
-        <Route path="/patterns/:pattern" component={Patterns} />
-        <Route path="/about" component={About} />
+        <Switch>
+          <Route exact path="/" render={() => <Game style={style} />} />
+          <Route path="/patterns" component={Patterns} />
+          <Route path="/about" component={About} />
+          <Redirect to="/" />
+        </Switch>
       </React.Fragment>
     </ThemeProvider>
   );

src/components/Header.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { Route, withRouter, Link } from 'react-router-dom';
+import { Route, withRouter, NavLink as Link } from 'react-router-dom';
 import Toggle from './Toggle';
 import Title from './Title';
 
@@ -63,7 +63,7 @@ const Header = props => {
       page: 'About'
     },
     {
-      path: '/patterns/memento',
+      path: '/patterns',
       page: 'Patterns'
     }
   ];
@@ -72,7 +72,7 @@ const Header = props => {
     <StyledHeader>
       <StyledLinkContainer>
         {paths.map(({ path, page }) =>
-          pathname === path ? (
+          pathname.includes(path) ? (
             <StyledRouterSpan key={page}>{page}</StyledRouterSpan>
           ) : (
             <StyledRouterLink key={page} to={path}>

src/components/Pattern.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledPattern = styled.div``;
+
+const Pattern = props => {
+  return (
+    <StyledPattern>
+      <Link to="/patterns">Back to Patterns List</Link>
+      <h1>{props.match.params.id}</h1>
+    </StyledPattern>
+  );
+};
+
+export default Pattern;

src/components/PatternsList.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledPatterns = styled.div``;
+
+const PatternsList = () => {
+  return (
+    <StyledPatterns>
+      <h1>LIST OF PATTERNS</h1>
+      <Link to="/patterns/memento">Memento</Link>
+      <Link to="/patterns/singleton">Singleton</Link>
+      <Link to="/patterns/command">Command</Link>
+    </StyledPatterns>
+  );
+};
+
+export default PatternsList;

src/pages/Patterns.jsx

@@ -1,36 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const StyledPatterns = styled.div``;
-
-const Header = styled.h3`
-  color: ${props => props.theme.buttonColorHover};
-  margin-top: 2rem;
-`;
-
-// const Patterns = ({ match }) => {
-//   const { pattern } = match.params;
-
-const Patterns = props => {
-  console.log(props);
-
-  props.history.listen(location => {
-    console.log(location);
-  });
-
-  const { pattern } = props.match.params;
-
-  return (
-    <StyledPatterns>
-      <Header>{pattern}</Header>
-    </StyledPatterns>
-  );
-};
-
-Patterns.propTypes = {
-  history: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired
-};
+import { Switch, Route } from 'react-router-dom';
+import PatternsList from '../components/PatternsList';
+import Pattern from '../components/Pattern';
+
+const Patterns = () => (
+  <Switch>
+    <Route path="/patterns" exact component={PatternsList} />
+    <Route path="/patterns/:id" component={Pattern} />
+  </Switch>
+);
 
 export default Patterns;