Hello I'm starting in react for now and I'm a little confused, I'm using routes / private routes, and so I created a components folder where I will have my login components and my login / index.js folder where I import this component, but I'm No doubt what better way to do this:
my app.js:
import React, { Component } from 'react';
import './App.css';
import Routes from './routes';
function App() {
return (
<Routes/>
);
}
export default App;
my routes js:
export default function Routes(){
return(
<BrowserRouter>
<Switch>
<Route path="/" exact component = {Login}/> //só chama rota se o caminho for exato;
<PrivateRoute path="/home" component = {DashBoard}/>
</Switch>
</BrowserRouter>
);
}
my component / LoginForm:
import React, { Component } from 'react';
class LoginForm extends Component {
constructor(props){
super(props);
this.state = {
login:'',
password:'',
errors: {},
isLoading: false
};
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onSubmit.bind(this);
}
onSubmit(e){
e.preventDefault();
}
onChange(e){
this.state({[e.target.name]: e.target.value});
}
render() {
const { errors, login, password, isLoading } = this.state;
return (
<form onSubmit={this.onSubmit}>
<label for="login">Login</label>
<input type="text" id="login" value={login} error= {errors.login} onChange={this.onChange} placeholder="Informe seu login" />
<label for="password">Senha</label>
<input type="password" id="password" value={password} error= {errors.password} onChange={this.onChange} placeholder="Informe sua senha"/>
<button className="btnEnt" type="submit" disabled ={isLoading}>Entrar</button>
</form>
)
}
}
export default LoginForm;
Now i'm in doubt as i will call my login comp in my index.js file from my login page
index.js
import React, { Component } from 'react';
import loginComp from '../../components/LoginForm';
class Login extends Component {
render() {
return (
<loginComp />
)
}
}
export default Login;
I don't have an error, but it doesn't render anything on screen
Looks like you have a typo right here: <ionChange} placeholder="Informe sua senha"/>
and you repasted the bottom portion of the code.
Assuming this was a mistake and successfully compiles, you're only going to want that bottom export default
and make sure your pathing is correct to that file.
./pages/login
does not exist, I believe you have named your login file LoginForm
Also, I am pretty sure . you need a div inside BrowserRouter, like so:
export default function Routes(){
return(
<BrowserRouter>
<div>
<Switch>
<Route path="/" exact component={Login}/>
<PrivateRoute path="/home" component={DashBoard}/>
</Switch>
</div>
</BrowserRouter>
);
}
Since, <loginComp/>
is not a component you have created in LoginPage it is not rendering the data. You can simply change the
import loginComp from '../../components/LoginForm';
to import LoginForm from '../../components/LoginForm';
remember /components/LoginForm this is the file name you have saved and not the component you have created.
render() {
return (
<LoginForm/>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.