Estoy realizando un proyecto en React donde tengo un formulario de Login que hace una búsqueda a una API Rest, y que tras esto, debe dirigirse a una nueva pagina en la que habrá un menú. He conseguido realizar la consulta a la API, pero no consigo que la redirección se lleve a cabo, lo máximo que he logrado es que se renderice el nuevo componente en la raíz, pero creo que esa no es la forma mas correcta. Adjunto mi código:
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import App from './components/App';
ReactDOM.render(
<App />, document.getElementById('root'));
registerServiceWorker();
Index.js saca por pantalla App.js, que contiene el formulario de login y el metodo de autenticacion:
App.js:
//Dependencies
import React, { Component } from 'react';
import './Global/css/App.css';
import ReactDOM from 'react-dom';
//Sources
import PanelUsuario from './PanelUsuario/PanelUsuario';
//Data
import conexion from '../data/conexion';
import items from '../data/menu';
import { BrowserRouter as Router } from 'react-router-dom';
class App extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''};
}
handleUsername (e){
this.setState({username: e.target.value});
}
handlePassword (e){
this.setState({password: e.target.value});
}
login (e){
e.preventDefault();
const username = this.state.username;
const password = this.state.password;
let urlEnvio="LLAMADA A LA API Rest";
fetch (urlEnvio, {
method: 'GET'
})
.then(res => res.json())
.then(res => {
if(res.count === 0){
ReactDOM.render(
<div className="alert alert-danger" id='UserNotExist'>
El usuario introducido no existe.
</div>,
document.getElementById('info')
);
}else{
ReactDOM.render(
<Router>
<PanelUsuario title='Pedidos' items={items}/>
</Router>,
document.getElementById('root')
);
}
});
}
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-12" id="capaForm">
<div className="row">
<div className="col-md-4">
</div>
<div className="col-md-4">
<form>
<div className="form-group">
<label>Usuario</label>
<input type="text"
className="form-control"
id="nameUser"
value={this.state.username}
onChange={this.handleUsername.bind(this)}/>
</div>
<div className="form-group">
<label>Contraseña</label>
<input type="password"
className="form-control"
id="passwordUser"
value={this.state.password}
onChange={this.handlePassword.bind(this)}/>
</div>
<button className="btn btn-default"
id="btnLogin"
onClick={this.login.bind(this)}>
Iniciar Sesión
</button>
</form>
<div id='info'></div>
</div>
<div className="col-md-4"></div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
Esto me carga el panel de usuario, que contiene un menu:
PanelUsuario.js:
//Dependencias
import React, { Component } from 'react';
import PropTypes from 'prop-types';
//Assets
import {Link} from 'react-router-dom';
class PanelUsuario extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
items: PropTypes.array.isRequired
};
render() {
const {items} = this.props;
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-12" id="capaForm">
<nav className="navbar navbar-default navbar-fixed-top">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span className="sr-only">Toggle navigation</span><span className="icon-bar"></span><span className="icon-bar"></span><span className="icon-bar"></span>
</button>
<a className="navbar-brand">Brand</a>
</div>
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
{items && items.map(
(item, key) => <li key={key}><Link to={item.url}>{item.title}</Link></li>)}
</ul>
</div>
</nav>
</div>
</div>
</div>
);
}
}
export default PanelUsuario;
En esta página se rellena el menú con los datos que se almacenan en un fichero aparte:
Menu.js:
export default [
{
title : "Opcion1",
url : "/Opcion1"
},
{
title : "Opcion2",
url : "/Opcion2"
},
{
title : "Opcion3",
url : "/Opcion3"
}
];
Y finalmente, un fichero donde he almacenado la función encargada del enrutamiento:
route.js:
import React from 'react';
import { Route, Switch } from 'react-router-dom';
//Components
import App from './App';
import opcion1 from './Opcion1';
import opcion2 from './Opcion2';
import opcion3 from './Opcion3';
import Pagina404 from './Pagina404/Pagina404';
const AppRoutes = () =>
<App>
<Switch>
<Route exact path="/Opcion1" component = {Opcion1} />
<Route exact path="/Opcion2" component = {Opcion2} />
<Route exact path="/Opcion3" component = {Opcion3} />
<Route component={Pagina404} />
</Switch>
</App>;
export default AppRoutes;
Agradecería que alguien me orientara en este asunto pues me encuentro bastante confuso. Muchas gracias.
document.location.href = '/new/url';
pero no estoy seguro si React o React-Router tenga alguna forma un poco mas ortodoxa de hacerlo