У меня есть компонент HomePage, который отображается моим файлом компонента (файл приложения. js) через React Router. В самом компоненте HomePage также настроен маршрутизатор React, в котором я переключаюсь между формами регистрации и входа. Однако, когда я нажимаю кнопку «Вход», компонент «Вход» не отображается, а вместо этого я получаю пустую страницу. Можете ли вы понять это? Спасибо. (С другой стороны, страница регистрации загружается внутри компонента домашней страницы очень хорошо) Полный код можно найти по адресу https://github.com/DYT5131/dyt
Вот приложение. js file:
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;
Вот компонент HomePage:
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;
Вот компонент SignIn, который не отображается:
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();