1

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.

1
  • Sé que puedes hacerlo al cambiar la url del documento, así: document.location.href = '/new/url'; pero no estoy seguro si React o React-Router tenga alguna forma un poco mas ortodoxa de hacerlo Commented el 16 abr. 2018 a las 15:39

1 respuesta 1

1

Puedes probar a sustituir:

      ReactDOM.render(
      <Router>  
        <PanelUsuario title='Pedidos' items={items}/>
      </Router>,
        document.getElementById('root')
      );

por:

     ReactDOM.render(
         <Redirect to='/Option1'/>
     );

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.