从两个不同的页面调用函数

我制作了一个react web应用程序,它应该隐藏登录页面上的导航栏,然后在其他所有页面中成功登录后,它应该重新出现。我在登录页面中隐藏标题的方式是通过创建一个函数,但登录按钮位于另一个页面(Authen.js)中,该函数位于App中。js我的问题是,我无法从第一页调用函数到另一页。

./src/App.js
  Line 69:  'operation' is not defined  no-undef 

import React, { Component } from 'react';
import './App.css';
import Authen from './Pages/Authen'
import Home from './Pages/Home';
import secondpage from './Pages/secondpage';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
var firebase = require('firebase');


class App extends Component {
      constructor(props){
          super(props);

          this.state = {
          ShowMe:false
          };
        }

         operation(){
          this.setState({
            ShowMe:true
          })
        }

    render(){
      return(
        <div>
          <Router >
          <div>
            <div>
            {
              this.state.ShowMe?
              <ul>


                <li><Link to="/Home">Home</Link></li>
                <li><Link to="/secondpage">secondpage</Link></li>
              </ul>
              :null
            }

          </div>
          <Route exact path="/" component={Authen}/>
          <Route path="/Home" component={Home}/>
          <Route path="/secondpage" component={secondpage}/>
          </div>
        </Router>
    </div>
      );
    }
  }
export default App;

登录页面:

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'
import {operation} from '../App'
var firebase = require('firebase');

class Authen extends React.Component {


    Login = () => {
                //login method
    const email = this.refs.email.value;
    const password = this.refs.password.value;
    console.log(email,password);

    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, password);


    promise.catch(e =>{
      var err = e.message;
      console.log(err);
      this.setState({err: err});
    });
    //gets user uid
    firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(user.uid);
 this.props.history.push('/Home');
 operation();
  }
});
}


constructor(props){
    super(props);

    this.state = {
        err:''
    };
    this.Login = this.Login.bind(this);
  }
  render(){
    return(
        <div className="login_div">
          <div  className="main-div">
   <h3>N.N.NASSAR</h3>
    <input ref="email" type="email" placeholder="Email..." id="email_field" />
    <input ref="password" type="password" placeholder="Password..." id="password_field" />
    <p>{this.state.err}</p>
     <button onClick={() => this.Login() || this.operation()} id="Login"> Login </button>
    <button onClick={this.signup}>Sign Up</button>
  </div>
      </div>
    );
  }
}

export default withRouter(Authen);

感谢您抽出时间:)