Skip to content

Commit aeebcd2

Browse files
zoltantothcomzoltantothcom
committed
Setup correct routing for patterns list and each pattern
1 parent 5febc5d commit aeebcd2

5 files changed

Lines changed: 54 additions & 40 deletions

File tree

‎src/Layout.jsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Route, withRouter } from 'react-router-dom';
3+
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
44
import { ThemeProvider } from 'styled-components';
55
import { connect } from 'react-redux';
66
import styleLight from './styles/hljs/hljs.light';
@@ -32,9 +32,12 @@ const Layout = props => {
3232
<GlobalStyle mode={mode} />
3333
<Header />
3434

35-
<Route exact path="/" render={() => <Game style={style} />} />
36-
<Route path="/patterns/:pattern" component={Patterns} />
37-
<Route path="/about" component={About} />
35+
<Switch>
36+
<Route exact path="/" render={() => <Game style={style} />} />
37+
<Route path="/patterns" component={Patterns} />
38+
<Route path="/about" component={About} />
39+
<Redirect to="/" />
40+
</Switch>
3841
</React.Fragment>
3942
</ThemeProvider>
4043
);

‎src/components/Header.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled, { css } from 'styled-components';
4-
import { Route, withRouter, Link } from 'react-router-dom';
4+
import { Route, withRouter, NavLink as Link } from 'react-router-dom';
55
import Toggle from './Toggle';
66
import Title from './Title';
77

@@ -63,7 +63,7 @@ const Header = props => {
6363
page: 'About'
6464
},
6565
{
66-
path: '/patterns/memento',
66+
path: '/patterns',
6767
page: 'Patterns'
6868
}
6969
];
@@ -72,7 +72,7 @@ const Header = props => {
7272
<StyledHeader>
7373
<StyledLinkContainer>
7474
{paths.map(({ path, page }) =>
75-
pathname === path ? (
75+
pathname.includes(path) ? (
7676
<StyledRouterSpan key={page}>{page}</StyledRouterSpan>
7777
) : (
7878
<StyledRouterLink key={page} to={path}>

‎src/components/Pattern.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Link } from 'react-router-dom';
4+
5+
const StyledPattern = styled.div``;
6+
7+
const Pattern = props => {
8+
return (
9+
<StyledPattern>
10+
<Link to="/patterns">Back to Patterns List</Link>
11+
<h1>{props.match.params.id}</h1>
12+
</StyledPattern>
13+
);
14+
};
15+
16+
export default Pattern;

‎src/components/PatternsList.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Link } from 'react-router-dom';
4+
5+
const StyledPatterns = styled.div``;
6+
7+
const PatternsList = () => {
8+
return (
9+
<StyledPatterns>
10+
<h1>LIST OF PATTERNS</h1>
11+
<Link to="/patterns/memento">Memento</Link>
12+
<Link to="/patterns/singleton">Singleton</Link>
13+
<Link to="/patterns/command">Command</Link>
14+
</StyledPatterns>
15+
);
16+
};
17+
18+
export default PatternsList;

‎src/pages/Patterns.jsx‎

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,13 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import styled from 'styled-components';
4-
5-
const StyledPatterns = styled.div``;
6-
7-
const Header = styled.h3`
8-
color: ${props => props.theme.buttonColorHover};
9-
margin-top: 2rem;
10-
`;
11-
12-
// const Patterns = ({ match }) => {
13-
// const { pattern } = match.params;
14-
15-
const Patterns = props => {
16-
console.log(props);
17-
18-
props.history.listen(location => {
19-
console.log(location);
20-
});
21-
22-
const { pattern } = props.match.params;
23-
24-
return (
25-
<StyledPatterns>
26-
<Header>{pattern}</Header>
27-
</StyledPatterns>
28-
);
29-
};
30-
31-
Patterns.propTypes = {
32-
history: PropTypes.object.isRequired,
33-
match: PropTypes.object.isRequired
34-
};
2+
import { Switch, Route } from 'react-router-dom';
3+
import PatternsList from '../components/PatternsList';
4+
import Pattern from '../components/Pattern';
5+
6+
const Patterns = () => (
7+
<Switch>
8+
<Route path="/patterns" exact component={PatternsList} />
9+
<Route path="/patterns/:id" component={Pattern} />
10+
</Switch>
11+
);
3512

3613
export default Patterns;

0 commit comments

Comments
 (0)