updated nav bar to use react router Link
This commit is contained in:
parent
c96ec875cd
commit
728c0440d8
3 changed files with 16 additions and 11 deletions
|
@ -6,7 +6,7 @@ class AboutPage extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<NavBar/>
|
||||
<h1>About page</h1>;
|
||||
<h1>About page</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/" component={PublishPage} />
|
||||
</Router>
|
||||
<Route exact path="/about" component={AboutPage} />
|
||||
<Route exact path="/login" component={LoginPage} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
)
|
||||
|
||||
|
|
Loading…
Reference in a new issue