Good afternoon, today I am with a router inconvenience, it turns out that I have a project in react, and upload it to Firebase Hosting, the thing is, all the routes work, as long as the router is reactive who does the redirect, imagine I enter the path '/', and this makes me redirect to the Login, this works fine, but if for example I want to go directly to the '/ login', I get error 404 page not found. I know that this can be solved and in fact I remember doing it a long time ago but I do not remember how, if someone can help me, I would appreciate it. I leave my code of the framework that is responsible for 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;
}