HistoryNav working with routing
This commit is contained in:
parent
0968c22cf6
commit
5d799021f0
2 changed files with 23 additions and 14 deletions
|
|
@ -14,7 +14,7 @@ import { Container, Row, Column } from './skeleton';
|
||||||
import { Articles, RoutedArticle } from './Article';
|
import { Articles, RoutedArticle } from './Article';
|
||||||
import { Footer } from './Footer';
|
import { Footer } from './Footer';
|
||||||
import { Header } from './Header';
|
import { Header } from './Header';
|
||||||
import { NavList, TagNav, HistoryNav, HistoryNavStart } from './Nav';
|
import { NavList, TagNav, HistoryNav } from './Nav';
|
||||||
|
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
|
|
@ -47,7 +47,7 @@ class App extends Component {
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
{ /* Display HistoryNav if this is a series of articles */ }
|
{ /* Display HistoryNav if this is a series of articles */ }
|
||||||
<Route exact path="/" component={HistoryNavStart} />
|
<Route exact path="/" component={HistoryNav} />
|
||||||
<Route exact path="/page/:page" component={HistoryNav} />
|
<Route exact path="/page/:page" component={HistoryNav} />
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
|
|
|
||||||
33
src/Nav.js
33
src/Nav.js
|
|
@ -73,29 +73,38 @@ class TagNav extends Component {
|
||||||
|
|
||||||
class HistoryNav extends Component {
|
class HistoryNav extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
let page = 0;
|
||||||
|
if (this.props.match.params.page) {
|
||||||
|
page = parseInt(this.props.match.params.page, 10);
|
||||||
|
}
|
||||||
|
console.log('nav page', page);
|
||||||
|
|
||||||
let left = "";
|
let left = "";
|
||||||
if (!this.props.newest) {
|
if (page !== 0) {
|
||||||
|
let last_href = "/page/" + (page - 1);
|
||||||
|
if (page === 1) {
|
||||||
|
last_href = "/";
|
||||||
|
}
|
||||||
|
|
||||||
left = (
|
left = (
|
||||||
<a href="">
|
<Link to={last_href}>
|
||||||
<Icon name="arrow-left" />
|
<Icon name="arrow-left" />
|
||||||
<span> newer posts</span>
|
<span> newer posts</span>
|
||||||
</a>
|
</Link>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let next_href = "/page/" + (page + 1);
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
{ left }
|
{ left }
|
||||||
<a className="u-pull-right" href="">
|
<Link className="u-pull-right" to={next_href}>
|
||||||
<span>older posts </span>
|
<span>older posts </span>
|
||||||
<Icon name="arrow-right" />
|
<Icon name="arrow-right" />
|
||||||
</a>
|
</Link>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const HistoryNavStart = ({match}) => (
|
export { ListLink, NavList, TagNav, HistoryNav };
|
||||||
<HistoryNav newest />
|
|
||||||
)
|
|
||||||
|
|
||||||
export { ListLink, NavList, TagNav, HistoryNav, HistoryNavStart };
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue