diff options
author | 2018-03-15 16:12:24 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | a87c3fcaafc8c839ae1263f84502634ef61081ec (patch) | |
tree | eaac74b23d924248f4104749370a50a123c8acfa /vnext/src | |
parent | 60e2fe05bd65480ac175378d5bb6cc903b8b1132 (diff) |
switch to react-router
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/app.js | 51 | ||||
-rw-r--r-- | vnext/src/components/Navigation.js | 42 |
2 files changed, 32 insertions, 61 deletions
diff --git a/vnext/src/app.js b/vnext/src/app.js index 1991a14d..82209e45 100644 --- a/vnext/src/app.js +++ b/vnext/src/app.js @@ -1,37 +1,50 @@ import React from "react" import ReactDOM from "react-dom" -import createHistory from 'history/createBrowserHistory'; -const history = createHistory(); +import { BrowserRouter as Router, Route, Link } from "react-router-dom" -import Navigation from "./components/Navigation" import Discover from "./components/Discover" import Post from "./components/Post" class App extends React.Component { constructor(props) { - super(props) - this.navigate = this.navigate.bind(this); + super(props); this.state = { - location: history.location + visitor: { uid: 0 } } } render() { return ( - <div className="wrapper"> - <Navigation onNavigate={this.navigate} /> - { location.pathname === "/" && - <Discover params={this.state.location.search} /> } - { location.pathname === "/post" && - <Post /> } - </div> + <Router> + <div className="wrapper"> + <header> + <div id="header_wrapper"> + <div id="logo"><Link to="/">Juick</Link></div> + <nav id="global"> + <ul> + {this.state.visitor.uid ? + <li><Link to="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>Discuss</Link></li> + : + <li><Link to="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>Photos</Link></li> + } + <li><Link to="/?show=all" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>Discover</Link></li> + <li><Link to="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>Post</Link> + </li> + </ul> + </nav> + <div id="search"> + <form action="/"> + <input name="search" className="text" + placeholder="Search..." /> + </form> + </div> + </div> + </header> + <Route exact path="/" component={Discover} /> + <Route path="/post" component={Post} /> + </div> + </Router> ) - } - navigate(location) { - console.log(location); - history.push(location); - this.setState({location: location}) } - } diff --git a/vnext/src/components/Navigation.js b/vnext/src/components/Navigation.js deleted file mode 100644 index 95693d81..00000000 --- a/vnext/src/components/Navigation.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -export default class Navigation extends React.Component { - constructor(props) { - super(props); - this.state = { - visitor: {uid: 0} - } - this.transition = this.transition.bind(this); - } - transition(event) { - event.preventDefault(); - this.props.onNavigate({ pathname: event.currentTarget.pathname, search: event.currentTarget.search}); - }; - render() { - return ( - <header> - <div id="header_wrapper"> - <div id="logo"><a href="/" onClick={this.transition}>Juick</a></div> - <nav id="global"> - <ul> - { this.state.visitor.uid ? - <li><a href="/?show=discuss" onClick={this.transition}><i data-icon="ei-comment" data-size="s"></i>Discuss</a></li> - : - <li><a href="/?show=photos" rel="nofollow" onClick={this.transition}><i data-icon="ei-camera" data-size="s"></i>Photos</a></li> - } - <li><a href="/?show=all" rel="nofollow" onClick={this.transition}><i data-icon="ei-search" data-size="s"></i>Discover</a></li> - <li><a id="post" href="/post" onClick={this.transition}><i data-icon="ei-pencil" data-size="s"></i>Post</a> - </li> - </ul> - </nav> - <div id="search"> - <form action="/"> - <input name="search" className="text" - placeholder="Search..." /> - </form> - </div> - </div> - </header> - ) - } -} |