Как спрятать меню после нажатия на ссылку с помощьюact-router-dom

Question

Я хотел бы иметь меню веб-сайта, но после того, как я перенаправлен им на правильную страницу, я хочу, чтобы меню исчезло. Мне удается реализовать это с использованием response-router-dom и useLocation, как описано ниже, но я честно считаю, что есть лучший способ сделать это, так как мне не нравится использовать "/" в качестве константы ... у любого есть лучшая идея?

import React from "react";
import styled from "styled-components";
import {get} from 'lodash'

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useLocation
} from "react-router-dom";


const MenuWrapper = (props) => {
    let location = useLocation()
    if (get(location, 'pathname') === '/') {
        return (<div className={props.className}>{props.children}</div>)
    } else {
        return null
    }
}

const Page = styled.div`

`

const MenuBox = styled(MenuWrapper)`
  `;

const MenuButton = styled(Link)`
  `;

export default function Home() {
    return (
        <Page>
            <Router>
                <MenuBox>
                    <MenuButton to={'/someURL'}>play against computer</MenuButton>
                    <MenuButton to={'/home'}>Home</MenuButton>
                </MenuBox>
                <Switch>
                    <Route path={'/someURL'}><PlayRandomMoveEngine/></Route>
                    <Route path={'/home'}>
                        <div/>
                    </Route>
                </Switch>
            </Router>
        </Page>
    );
}

Answer 1

Вы можете попробовать альтернативный способ вставки MenuBox в приложение. Следуйте приведенному ниже коду

const Router = () {
  return (
    <Page>
      <Router>
        <Switch>
          <Route path="/" exact>
            <HomePage>
          </Route>
          <Route path="/someURL">
            <PlayRandomMoveEngine/>
          </Route>
        </Switch>
      </Router>
    </Page>
  );
}

HomePage. js

import MenuBox from '~/components/MenuBox';

const HomePage = () => {
  return (
    <>
      <MenuBox>
        <MenuButton to="/someURL">play against computer</MenuButton>
        <MenuButton to={'/home'}>Home</MenuButton>
      </MenuBox>
      <div> HOME PAGE ! </div>
    </>
  )
}

, в результате вы увидите MenuBox только по следующему пути "/". И если вы решите показать меню на какой-то другой странице вместе с другими пунктами меню, это не проблема. Просто импортируйте MenuBox, и он будет работать нормально