ReactJS，react-router：在登录页面中排除导航菜单

Question

So I have a LoginPage that looks like this,

and when you login, you will be directed to this page:

now, I want my login page to don't have a navigation and look like this,

how can I do that?

so I have this, in my 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;

My 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

and my 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

I am new in ReactJS so please be considerate in answering and thank you for your time!

Answer 1

my App.js

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

and it works now :)