how to click on h1 header to navigate to component? - reactjs

Question

I am trying to change the header to a link that calls for Homepage component. Right now it displays a logo title. But I want my users to be able to click on it to direct them to the landing page .
import React from 'react';
import { NavLink } from 'react-router-dom';
import AuthContext from '../../context/auth-context';
import './MainNavigation.css';
// import Homepage from '../../pages/Homepage';
const mainNavigation = props => (
<AuthContext.Consumer>
{context => {
return (
<header className="main-navigation">
<div className="main-navigation__logo">
<h1>Lux Lab Hair Salon</h1> // ....... change this to a link
</div>
<nav className="main-navigation__items">
<ul>
<li>
<NavLink to="/events">Available Hours</NavLink>
</li>
{!context.token && (
<li>
<NavLink to="/auth">Sing In | Sing Up</NavLink>
</li>
)}
{context.token && (
<React.Fragment>
<li>
<NavLink to="/bookings">Bookings</NavLink>
</li>
<li>
<button onClick={context.logout}>Logout</button>
</li>
</React.Fragment>
)}
</ul>
</nav>
</header>
);
}}
</AuthContext.Consumer>
);
export default mainNavigation;

Answer 1

<h1><NavLink to={'...'}>Lux Lab Hair Salon</NavLink></h1> or just a <NavLink style={{ fontSize: '20px' }}>Lux Lab Salon</NavLink>

Answer 2

So the problem is how to call for a component in a react navigation bar.
Here are the steps I followed to resolve the problem.
I imported BrowserRouter in App.js and used it to define the path of the homepage
in App.js
import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';
import Homepage from './pages/Homepage';
class App extends Component {
render() {
return (<BrowserRouter>
<React.Fragment>
<Navigation/>
<Switch>
<Route path="/" component={Homepage}/>
<Route path="/nav1path" component={Page1Component}/>
<Route path="/nav2path" component={Page2Component}/>
{!this.state.token && <Redirect to="/" exact/>}
</Switch>
</React.Fragment>
</BrowserRouter>);
}
}
export default App;
Then I used the suggestion above to circle my H1 tag with NavLink.
<NavLink to={'/'}>
Header title
Also don't forget to import other components before you call them inside Route.