当我在 react 中选择登录或注册时如何隐藏导航栏？

Question

I am trying to hide the Menu component when I select log in my app. I am working with react hooks and I have no idea how to do it.

My main looks like this :

 <div>
        <Menu/>
        <Router>
            {
                domainList === "error" ?
                    (
                        <ErrorMessage
                            message="Error"
                        />
                    )
                    :
                    Boolean(domainList) === true ?
                        (
                            <Main
                                endpoint={endpoint}
                                callbackReFetchDomains={reFetchDomains}
                                domainList={domainList}
                                hasDomainListError={hasDomainListError}
                                appendDomainList={appendDomainList}
                                changeDomainList={changeDomainList}
                            />
                        )
                        :
                        (
                            <LoadingSpinner/>
                        )
            }
        </Router>
    </div>

My main looks like this :

<>
        <div>
            {/*Switch will only render the first matched <Route/> child.*/}
            <Menu/>
            <Switch>
                <Route path="/topics">
                    <ExampleComponentStructure/>
                </Route>
                <Route path="/login">
                    <Login/>
                </Route>
                <Route path="/domains">
                    <DomainList
                        endpoint={props.endpoint}
                        callbackReFetchDomains={props.callbackReFetchDomains}
                        domainList={props.domainList}
                        hasDomainListError={props.hasDomainListError}
                        appendDomainList={props.appendDomainList}
                        changeDomainList={props.changeDomainList}
                    />
                </Route>
                <Route path="/signup">
                    <Signup/>
                </Route>
                <Route path="/users">
                    <UserMaintainList
                        endpoint={props.endpoint}
                    />
                </Route>
                <Route path="/">
                    <StickerList
                        endpoint={props.endpoint}
                        callbackReFetchDomains={props.callbackReFetchDomains}
                        domainList={props.domainList}
                        hasDomainListError={props.hasDomainListError}
                        changeDomainList={props.changeDomainList}
                    />
                </Route>

            </Switch>
        </div>
    </>

I know that the code is not clean. I am just starting with react and need some help doing this login screen. Thank you.

Answer 1

If i understood correct, you want to hide component Menu (is it navbar?). First you can check url you are in, by creating some flag, for example:

const isLogin = props.match.path === "/login"

And then just render component if it is false

{!isLogin && <Menu/>}

Answer 2

here is how i done

       <PublicRoute exact path="/welcome" component={WelcomePageView} />
       <PublicRoute exact path="/signin" component={SignInView} />
        <PublicRoute
          exact
          path="/forgotPassword"
          component={ResetPasswordView}
        />
        <PublicRoute
          exact
          path="/resetPassword"
          component={SetNewPasswordView}
        />
        <RouteWithLayout
          component={UserDashboardView}
          exact
          layout={MainLayout}
          noAccess={true}
          path="/dashboard"
        />
        <RouteWithLayout
          component={ProfileView}
          exact
          layout={MainLayout}
          path="/Profile"
        />

PublicRoute.jsx

import React, { useEffect } from "react"
import { Route, Redirect } from "react-router"
import { connect } from "react-redux"
import { isUserAuthenticated, getAuthErrors, getAccessToken, getUserID } from "../selectors"
import { validateToken, logout } from "../actions/auth"
import { getPersistStatus } from "../selectors/persist"


const PublicRoute = ({
    component: Component,
    isAuthenticated,
    authErrors,
    access_token,
    uid,
    persistStatus,
    logoutUser,
    ...rest
}) => {

    useEffect(() => {
      if (persistStatus && !isAuthenticated) {
            logoutUser()
      }
    }, [persistStatus, isAuthenticated, logoutUser])

    return (
        <Route {...rest} render={props => (
            !isAuthenticated ? (
                <Component {...props} />
            ) : (
                    <Redirect to={{
                        pathname: "/dashboard",
                        state: { from: props.location }
                    }} />
                )
        )} />
    )
}

const mapStateToProps = (state) => ({
    isAuthenticated: isUserAuthenticated(state),
    authErrors: getAuthErrors(state),
    access_token: getAccessToken(state),
    uid: getUserID(state),
    persistStatus: getPersistStatus(state)
})

const mapDispatchToProps = (dispatch) => ({
    logoutUser: () => {
        dispatch(logout())
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(PublicRoute)

RouteWithLayout.jsx

import React from "react"
import { Route } from "react-router-dom"
import PropTypes from "prop-types"

import { useAuthorization } from "./Permissions"

const RouteWithLayout = (props) => {
  const { layout: Layout, component: Component, path, noAccess, ...rest } = props

  const userAccess = useAuthorization(path)

  return (
    <Route
      {...{ path, ...rest }}
      render={(matchProps) => (
        <Layout>
          {noAccess || userAccess.includes("R") ? (
            <Component {...matchProps} />
          ) : (
            <p>You do not have sufficient permissions to view this page</p>
          )}
        </Layout>
      )}
    />
  )
}

RouteWithLayout.propTypes = {
  component: PropTypes.any.isRequired,
  layout: PropTypes.any.isRequired,
  path: PropTypes.string,
}

export default RouteWithLayout