Question

我在/play路线中显示导航项目符号时遇到问题。除了该文件中的代码外，我不想显示任何内容，但是我不知道如何删除导航路线的项目符号。我的条件适用于已登录用户，而不适用于已登录用户。我不能将其放在未登录的路线中，因为它还会显示登录页面和登录页面。

我希望在不登录而访问它的路线（/ play）时显示此Play路线。我只想显示该路线的代码而不显示我上面提到的其他项目符号。有人可以建议我做些什么来解决此问题吗？

这是我的导航代码：

import React from 'react';
import { Link } from 'react-router-dom';


import AuthUserContext from '../Session/AuthUserContext';
import SignOutButton from '../SignOut';
import * as routes from '../../constants/routes';

const Navigation = () =>
  <AuthUserContext.Consumer>
    {authUser => authUser
      ? <NavigationAuth />
      : <NavigationNonAuth />
    }
  </AuthUserContext.Consumer>

const NavigationAuth = () =>
  <ul>
    <li><Link to={routes.LANDING}>Landing</Link></li>
    <li><Link to={routes.HOME}>Home</Link></li>
    <li><Link to={routes.ACCOUNT}>Account</Link></li>
    <li><Link to={routes.RSS}>RSS</Link></li>
    <li><Link to={routes.HTML}>HTML</Link></li>
    <li><Link to={routes.Activation}>Activation</Link></li>
    <li><SignOutButton /></li>
  </ul>

const NavigationNonAuth = () =>
  <ul>
    <li><Link to={routes.LANDING}>Landing</Link></li>
    <li><Link to={routes.SIGN_IN}>Sign In</Link></li>
    </ul>

export default Navigation;

这是我的App.js（默认运行页面）：

  import React from 'react';
  import {
    BrowserRouter as Router,
    Route,
  } from 'react-router-dom';

  import Navigation from '../Navigation';
  import LandingPage from '../Landing';
  import SignUpPage from '../SignUp';
  import SignInPage from '../SignIn';
  import PasswordForgetPage from '../PasswordForget';
  import HomePage from '../Home';
  import AccountPage from '../Account';
  import Activation from '../Activation';
  import withAuthentication from '../Session/withAuthentication';
  import * as routes from '../../constants/routes';
  import RSS from '../RSS';
  import HTML from '../HTML';
  import Play from '../Play';
  import './index.css';

  const App = () =>
    <Router>
      <div className="app">
        <Route exact path={routes.Play} component={() => <Play />} />
        <Navigation />

        <hr/>

        <Route exact path={routes.LANDING} component={() => <LandingPage />}       />
        <Route exact path={routes.SIGN_UP} component={() => <SignUpPage />} />
        <Route exact path={routes.SIGN_IN} component={() => <SignInPage />} />
        <Route exact path={routes.PASSWORD_FORGET} component={() =>                               <PasswordForgetPage />} />
        <Route exact path={routes.HOME} component={() => <HomePage />} />
        <Route exact path={routes.ACCOUNT} component={() => <AccountPage />} />
        <Route exact path={routes.RSS} component={() => <RSS />} />
        <Route exact path={routes.HTML} component={() => <HTML />} />
        <Route exact path={routes.Activation} component={() => <Activation />} />
        <hr/>
      </div>
    </Router>

  export default withAuthentication(App);

我的Play代码是这样：

import React, { Component } from "react";

class Play extends Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }
    render() {
      return (
        <div>
        <h1> Play </h1>
        </div>
      );
    }
  }
  export default Play;

最后是它的样子： https://ibb.co/ctS9xJ

转到特定路线后如何隐藏导航栏？

0 个答案: