CODEWITHSUNDEEP
javascriptreactjsreact-router-domreact-statereact-redux-form
lukeet
lukeet

Reputation: 491

How do I detect when router path '/' is true?

How do I detect when the '/' root path is true? I want to set up some basic code to hide the Navbar element when on the path '/' but everything I've seen requires use of hooks and my application is set up inside of a class component so I can't use these hooks any solutions? basic code so far.

import React, { Component, Fragment } from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import './tailwind.css'
import { LandingPage } from './components/LandingPage'
import { PortsmouthMap } from './components/Map'
import { Timeline } from './components/04-components/timeline/Timeline'
import Error from './components/Error'
import { HomeLoading } from '../src/components/01-global/homepageLoading'
import Nav from './components/Navigation/Nav';
import SideDrawer from './components/Navigation/SideDrawer';


export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      nav: false
    }

  NoNav = () => {
    this.setState({ nav: false });
  }

  ShowNav = () => {
    this.setState({ nav: true });
    console.log('nav')
  }

render() {

    return (
      <Fragment>

        <BrowserRouter>
          <HomeLoading state={this.state} />
          {this.state.nav && <Nav
            sideDrawerOpen={this.state.sideDrawerOpen}
            drawerClickHandler={this.drawerToggleClickHandler} />}
          <SideDrawer sidedrawerClickHandler={this.sidedrawerToggleClickHandler} show={this.state.sideDrawerOpen} />
          <div onClick={this.backdropClickHandler} className="h-full w-full" style={{ ...this.state.sideDrawerOpen === false ? sideMenuInactive : sideMenuActive }}>
            <Switch>
              <Route path="/" render={() => <LandingPage appOnLoad={this.appOnLoad} isAuthed={true} />} exact />
              <Route path="/Map" render={() => <PortsmouthMap appOnLoad={this.appOnLoad} isAuthed={true} />} />
              <Route path="/Timeline" render={() => <Timeline appOnLoad={this.appOnLoad} isAuthed={true} />} />
              <Route component={Error} />
            </Switch>
          </div>
        </BrowserRouter>
      </Fragment>
    );
  }
}

Upvotes: 2

Views: 1899

Answers (2)

Muhammad Emad Al-Din
Muhammad Emad Al-Din

Reputation: 371

you can use withRouter HOC from react-router-dom, it passes location, match, history props to your component and you won't have to use hooks there, but I recommend that you refactor the component to hooks just to get the experience of it.

hope this helps.

Upvotes: 2

Apoorwa Jayswal
Apoorwa Jayswal

Reputation: 65

Hope this will help you

import { useLocation } from 'react-router-dom'

    const yourFunction = () => {
      let location = useLocation();
       //location.pathname will give you current route path 
      console.log(location.pathname);

    }

Upvotes: 0

Related Questions