Saya ingin memiliki menu situs web, tetapi setelah saya diarahkan olehnya
ke halaman yang benar, saya ingin menu menghilang. Saya berhasil mengimplementasikannya menggunakan react-router-dom dan useLocation seperti yang dijelaskan di bawah ini, tapi sejujurnya saya merasa ada cara yang lebih baik untuk melakukannya, karena saya tidak suka menggunakan "/" sebagai konstanta ... apakah ada yang punya ide yang lebih baik?

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>
    );
}
-1
vigdora 19 April 2020, 20:46

1 menjawab

Jawaban Terbaik

Anda dapat mencoba cara alternatif untuk memasukkan MenuBox ke app. Ikuti kode di bawah ini

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

Halaman Beranda.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>
    </>
  )
}

Sebagai hasilnya Anda akan melihat MenuBox hanya dengan jalur berikutnya "/". Dan jika Anda memutuskan untuk menampilkan menu di halaman lain dengan beberapa item menu lainnya, itu tidak masalah. Cukup impor MenuBox dan itu akan berfungsi dengan baik

1
IT's Bruise 19 April 2020, 18:06