0

Buenas tardes, el dia de hoy estoy con un inconveniente de router, resulta que tengo un proyecto en react, y lo subi a Firebase Hosting, la cosa es, funcionan todas las rutas, siempre y cuando, sea el router de react quien hace el redirect, imaginemos yo ingreso a el path '/', y este me hace redirect al Login, esto funciona bien, pero si por ejemplo yo quiero ir directamente al '/login', me salta error 404 pagina no encontrada. Se que esto se puede solucionar y de hecho recuerdo haberlo hecho hace mucho tiempo pero no recuerdo como, si alguien me puede ayudar le agradeceria. Dejo mi codigo del 'framework' que es el que se encarga del routing.

'use strict';
import React from 'react';
import Perf from 'react-addons-perf';
import {render} from 'react-dom';
import { createHistory } from 'history'
import {Router, Route, IndexRoute, IndexRedirect, Redirect, useRouterHistory} from 'react-router';
import {syncHistoryWithStore, routerReducer} from 'react-router-redux';
import {Provider} from 'react-redux';
import detect from '../util/detect';
import store from '../store';
import App from '../sections/App';
import Users from '../components/users';
import login from '../components/login'
import logout from '../components/logout'
import notFound from '../components/404'
import resetUsers from '../sections/ResetUsers'
import {backendURL, backendPort} from '../components/connect.js';
if(process.env.NODE_ENV == 'production'){
var backend = "";
}else{
  var backend = backendURL +':'+ backendPort;
}

const browserHistory = useRouterHistory(createHistory)({
  basename: '/'
})

const history = syncHistoryWithStore(browserHistory, store);


function checkToken (nextState, replace) {
  const token = localStorage.getItem('googleAccount');
  if (!token) {
    unauthorized(nextState, replace);
  }
}

function isLoged(nextState, replaceState) {
  const token = localStorage.getItem('googleAccount');
  if (token)
    replaceState({ nextPathname: nextState.location.pathname }, '/')
}

function isLogedOut(nextState, replaceState) {
  const token = localStorage.getItem('googleAccount');
  if (!token)
    replaceState({ nextPathname: nextState.location.pathname }, '/login')
}

function unauthorized (nextState, replace) {
  replace({
    pathname: '/login',
    state: { nextPathname: nextState.location.pathname }
  });
  localStorage.removeItem('googleAccount');
}

export default function() {
  var container = document.createElement('div');
  container.id = 'container';
  document.body.appendChild(container);
  if (process.env.NODE_ENV === 'development') window.Perf = Perf;
  document.body.className = merge(document.body.className.split(' '),detect.classes).join(' ');

  render((
    <Provider store={store}>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={resetUsers} onEnter={checkToken}/>
        </Route>
        <Route path="/users" component={App} onEnter={checkToken}>
          <IndexRoute component={Users} />
        </Route>
        <Route path="/login" component={App}>
          <IndexRoute component={login} onEnter={isLoged}/>
        </Route>
        <Route path="/logout" component={App}>
          <IndexRoute component={logout} onEnter={isLogedOut}/>
        </Route>
        <Route path="/*" component={App}>
          <IndexRoute component={notFound}/>
        </Route>
      </Router>
    </Provider>
    ),container);
};

function merge() {
  var arr = [];
  for (var i=0; i<arguments.length; i++) {
    if (Array.isArray(arguments[i])) {
      arguments[i].forEach(function(cur) {
        if (cur && arr.indexOf(cur)<0) arr.push(cur);
      });
    }
  }
  return arr;
}

1 respuesta 1

1

Necesitas indicar que redireccione con el HTML pushState algo así sería en el archivo firebase.json:

"hosting": {
  "rewrites": [ {
    "source": "**",
    //"destination": "/index.html"
    "destination": "/"
  } ]
}

Referencia https://firebase.google.com/docs/hosting/url-redirects-rewrites?hl=es-419

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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