Как создать условие в зависимости от маршрута?

Question

У меня есть приложение, которое разделено на 3 раздела: заголовок, средний и популярный

<>
 <Header />
 <Middle />
 <Popular />
</>

В заголовке есть кнопка с надписью «Забронировать сейчас» <Link to="/booking"> <button> Book it now </button> </Link>. При нажатии он использует React Router для переключения маршрута в компоненте Middle.

Компонент «Middle»:

<Switch>
    <Route path="/booking">  //When 'Book it now' is clicked, this is displayed.
       <Booking />
    </Route>
    <Route path="/">
       <Form />
    </Route>
</Switch>

Теперь я хочу, чтобы кнопка Header исчезла, когда маршрут '/ бронирование. Я мог бы создать состояние и переключить его в false после нажатия кнопки, чтобы кнопка не отображалась, но я подумал, что было бы очень удобно, если бы я мог сделать что-то подобное в файле заголовка:

if (route === '/booking') {
    //don't display button in Header                    (also, how would I do this?)
}

Answer 1

Если вы используете React-Router v5, то мне нравится использовать хуки:

let location = useLocation();

let isBookingPage = location.pathname.includes('booking')

<>
 {!isBookingPage && <Header />}
 <Middle />
 <Popular />
</>

Answer 2

Вы можете использовать withRouter, импортированный из react-router-dom

import { withRouter } from 'react-router-dom';

const OtherComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends Component {
  render() {
    const { pathname } = this.props.location;
    if(pathnanme != 'booking') {
      <button>Hidden on booking</button>
    }
  }
}

Это должен быть ваш Booking компонент:

import { withRouter } from 'react-router-dom';

const Booking = (props) => {
  const { pathname } = props.location;

  console.log(pathname);

  return (
    <div>
      {(pathname !== 'booking' && pathname !== '/booking') ? <button>Hidden on booking</button> : null}
      <span>always shown</span>
    </div>
  );
}


export default withRouter(Booking)

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

Answer 3

Используя перехватчик useLocation в React Router, вы можете получить доступ к маршруту, по которому пользователь в данный момент находится:

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

const location = useLocation() //with no arguments

console.log(location.pathname) //e.g. '/' or '/booking'

Местоположение может использоваться для условного рендеринга чего угодно, в любом компонент, в зависимости от маршрута пользователя на

location.pathname === '/booking' && <button> Book it now </button>