react/components/AboutPage/index.js

@@ -6,7 +6,7 @@ class AboutPage extends React.Component {
     return (
       <div>
         <NavBar/>
-        <h1>About page</h1>;
+        <h1>About page</h1>
       </div>
     );
   }

react/containers/NavBar/view.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import request from 'utils/request';
+import { Link, withRouter } from 'react-router-dom';
 import Logo from 'components/Logo';
 import NavBarChannelDropdown from 'components/NavBarChannelOptionsDropdown';
+import request from 'utils/request';
 
 const VIEW = 'VIEW';
 const LOGOUT = 'LOGOUT';
@@ -48,7 +49,7 @@ class NavBar extends React.Component {
         break;
       case VIEW:
         // redirect to channel page
-        window.location.href = `/${this.props.channelName}:${this.props.channelLongId}`;
+        this.props.history.push(`/${this.props.channelName}:${this.props.channelLongId}`);
         break;
       default:
         break;
@@ -63,8 +64,8 @@ class NavBar extends React.Component {
             <span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
           </div>
           <div className="nav-bar--right">
-            <a className="nav-bar-link link--nav-active" href="/">Publish</a>
-            <a className="nav-bar-link link--nav" href="/about">About</a>
+            <Link className="nav-bar-link link--nav-active" to="/">Publish</Link>
+            <Link className="nav-bar-link link--nav" to="/about">About</Link>
             { this.props.channelName ? (
               <NavBarChannelDropdown
                 channelName={this.props.channelName}
@@ -73,7 +74,7 @@ class NavBar extends React.Component {
                 LOGOUT={LOGOUT}
               />
             ) : (
-              <a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
+              <Link id="nav-bar-login-link" className="nav-bar-link link--nav" to="/login">Channel</Link>
             )}
           </div>
         </div>
@@ -82,4 +83,4 @@ class NavBar extends React.Component {
   }
 }
 
-export default NavBar;
+export default withRouter(NavBar);

react/root.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import PublishPage from 'components/PublishPage';
 import AboutPage from 'components/AboutPage';
@@ -9,9 +9,13 @@ import LoginPage from 'components/LoginPage';
 
 const Root = ({ store }) => (
   <Provider store={store}>
-    <Router>
-      <Route exact path="/" component={PublishPage} />
-    </Router>
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" component={PublishPage} />
+        <Route exact path="/about" component={AboutPage} />
+        <Route exact path="/login" component={LoginPage} />
+      </Switch>
+    </BrowserRouter>
   </Provider>
 )