为什么我的应用程序中的路由器不起作用？

Question

我有一个HomePage组件，该组件由我的App组件（App.js文件）文件通过React Router呈现。 HomePage组件本身也设置了一个React Router，在这里我可以在注册和登录形式之间进行切换。但是，当我单击“登录”按钮时，“登录”组件不显示，而是显示一个空白页面。你能解决这个吗？谢谢。 （另一方面，注册页面在Homepage组件中的加载也很好）完整的代码可以在https://github.com/DYT5131/dyt

中找到

这是App.js文件：

class App extends React.Component {

    render () {

    return (

       <div>


        <Switch>

        <Route exact path="/" component={HomePage}></Route>

        <ProtectedRoute path="/userprofile" component={UserAccount}></ProtectedRoute>

        </Switch>



       </div>



    );

  }

}

export default App;

这是主页组件：

import React from 'react';
import SignUp from './SignUp';
import SignIn from './SignIn';
import { NavLink, Route, Switch } from 'react-router-dom';

function HomePage () {
    return (

                  <div>

                <div className="App">


                {/* left-top div */}

                <div className='left-top'> 

                <h1 className='company-name'>DYT Evaluations</h1>
                </div>


                {/* right-top div */}

                <div className='right-top'> 

                { /* form */ }

                <div className='form'>

                <div className="ModeSelector">                  
                <NavLink exact to="/signin" activeClassName="ModeSelector-Active" className="ModeSelector-Sign-in">Sign In</NavLink>
                <NavLink exact to="/" activeClassName="ModeSelector-Active" className="ModeSelector-Sign-up">Sign Up</NavLink>
                </div>

                <Switch><Route exact path="/" component={SignUp}>
              </Route>
              <Route exact path="/signin" component={SignIn}>
              </Route>
              </Switch>





                </div>


                </div>


                </div>



                  </div>

    )
  }

  export default HomePage;

以下是不显示的登录组件：

import React, { Component } from 'react';
import firebase from '../firebase.js';


class SignIn extends Component {

      constructor() {
        super();

        this.state = {

            email: '',
            password: ''

        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleChange(e) {
        this.setState({
          [e.target.name]: e.target.value
        });
      }


      handleSubmit(e) {
        e.preventDefault();

        firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
        .then(() => this.props.history.push("/userprofile"))
        .catch(function(error) {

                console.log(error.code, error.message) ;

                });


        this.setState({

          email: '',
          password: ''

      });

      };

    render() {
        return(


            <div className="sign-up">

         <h1> Check Status </h1>


                <form onSubmit={this.handleSubmit}>


                    <input 
                    type="email" 
                    name="email" 
                    placeholder="Email"
                    onChange={this.handleChange}
                    value={this.state.email}
                    ></input> 

                    <br/>

                    <input 
                    type="password" 
                    name="password" 
                    placeholder="Password"
                    onChange={this.handleChange}
                    value={this.state.password}
                    ></input> 

                    <br/>


                    <button>Submit</button>

                </form>

            </div>
        )
    }
}

export default SignIn;

，如果需要的话，这里是索引文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter} from 'react-router-dom';



ReactDOM.render(
  <BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);


serviceWorker.unregister();