Как определить, когда путь к маршрутизатору '/' равен true? - PullRequest
Новая
       23

Как определить, когда путь к маршрутизатору '/' равен true?

1 голос
/ 03 апреля 2020

Как определить, что путь '/' root истинен? Я хочу настроить некоторый базовый код c, чтобы скрыть элемент Navbar, когда он находится на пути '/', но все, что я видел, требует использования хуков, и мое приложение настроено внутри компонента класса, поэтому я не могу использовать эти крючки какие-то решения? базовый c код до сих пор. 

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>
    );
  }
}

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Надеюсь, это поможет вам 

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

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

    }
0 голосов
/ 03 апреля 2020

вы можете использовать withRouter HO C из react-router-dom, он передает location, match, history реквизиты вашему компоненту, и вам не нужно будет использовать там хуки, но я рекомендую вам реорганизовать компонент в хуки только для получить опыт этого.

надеюсь, что это помогает.

...