时间戳

首页 > 解决方案 > 使用 react-router-dom 单击链接后如何隐藏菜单

reactjs - 使用 react-router-dom 单击链接后如何隐藏菜单

问题描述

我想要一个网站菜单，但是在我被它重定向
到正确的页面后，我希望菜单消失。我设法使用 react-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>
    );
}

标签： reactjsreact-router-dom

解决方案

您可以尝试将 MenuBox 插入应用程序的替代方法。按照下面的代码

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

主页.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 即可正常工作

推荐阅读