javascript - ReactJS， react 路由器: Ecxclude Navigation Menu in Login Page

Question

所以我有一个看起来像这样的登录页面，

当您登录时，您将被引导至此页面:

现在，我希望我的登录页面没有导航，看起来像这样，

我该怎么做？

所以我在我的 App.js

中有这个

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import LoginPage from "./Login";
import Main from "./Main";
import Menu from "./Menu";

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      loginPage:[],
      uploadScreen:[]
    }
  }

  render() {
    return (  
      <div className="ui container"> 
        <Route path="/" exact component={LoginPage} />
        <Menu />
        <Main />
      </div>
    );
  }
}
export default App;

我的Menu.js:

import React from 'react';
import { Link } from 'react-router-dom';
import {
  Container,
  Dropdown,
  Menu,
} from 'semantic-ui-react';

const FixedMenuLayout = () => (
  <div>
    <Menu fixed='top' inverted>
      <Container>
        <Menu.Item as='a' header>
          IRC
        </Menu.Item>
        <Menu.Item as={ Link } to= "/upload" >Create Material</Menu.Item>
        <Menu.Item as={ Link } to= "/assign-material" >Assign Material</Menu.Item>
        <Menu.Item as={ Link } to= "/create-group">Create Group</Menu.Item>
        <Menu.Item as={ Link } to= "/assign-doctor">Assign Group</Menu.Item>
        <hr />
        <Dropdown item simple text='Name of Logged In User'>
          <Dropdown.Menu>
            <Dropdown.Item>Log Out</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Container>
    </Menu>

  </div>
)

export default FixedMenuLayout

和我的Main.js:

import React from 'react';
import { Route ,Switch } from 'react-router-dom';
import UploadScreen from "./UploadScreen";
import CreateGroup from "./CreateGroup";
import AssignDoctor from "./AssignDoctor";
import AssignMaterial from "./AssignMaterial";

const Main = () => (
  <main>
    <Switch>
        <Route path="/upload" exact component={UploadScreen} />
        <Route path="/assign-material" exact component={AssignMaterial} />
        <Route path="/assign-doctor" exact component={AssignDoctor} />
        <Route path="/create-group" exact component={CreateGroup} />
    </Switch>
  </main>
)

export default Main

我是 ReactJS 的新手，所以请考虑回答，感谢您的宝贵时间!

Answer 1

我的App.js

  render() {
    const path = window.location.pathname;
    return (  
      <div className="ui container"> 
        <Route path="/" exact component={LoginPage} />
        {path !== '/' &&
          <div>
            <Menu />
            <Main />
          </div>
        }
      </div>
    );
  }

现在可以了:)