I have checked stackoverflow related to my this problem but none addresses it.
I am using nested routes for my reactJS app which is working fine on my local webpack server but not working on firebase hosting. Strangely it works till /admin/dashboard route but any further routes does not work i.e. /admin/list-bayaans or /admin/listBayaans it shows error [no matching route found] in browser console.
Routes.js:
import React from 'react';
import {Route, IndexRoute, Link} from 'react-router';
import Layout from './components/layout';
import Homepage from './components/homepage';
import Bayaans from './components/bayaanspage';
import Readquran from './components/readquran';
import Duas from './components/duaspage';
import Events from './components/eventspage';
import Contactpage from './components/contact';
import AdminLayout from './components/admin/adminLayout'; // admin section (using same theme with little style variation)
import LoginPg from './components/admin/loginPage';
import Dashboard from './components/admin/dashboard';
import AdminBayaansPg from './components/admin/adminBayaansPage';
import AdminDuasPg from './components/admin/adminDuasPage';
import AdminEventsPg from './components/admin/adminEventsPage';
// we are defining 'home' route explicitly as an patch for now. So if user is on any innner page and he clicks the HOME menu then '/home' will render as '/' does not work and does nto return to the index page. Need to see it though.
export default (
<div>
<Route path="/" component={Layout} >
<IndexRoute component={Homepage} />
<Route path="home" component={Homepage} />
<Route path="bayaans" component={Bayaans} />
<Route path="read-quran" component={Readquran} />
<Route path="duas" component={Duas} />
<Route path="events" component={Events} />
<Route path="contact" component={Contactpage} />
</Route>
<Route path="/admin" component={AdminLayout} >
<IndexRoute component={LoginPg} />
<Route path="dashboard" component={Dashboard} />
<Route path="list-bayaans" component={AdminBayaansPg} />
<Route path="list-duas" component={AdminDuasPg} />
<Route path="list-events" component={AdminEventsPg} />
</Route>
</div>
);
Problem:2
When I try to deploy again on firebase by changing routes using firebase deploy command and when I check in browser the routes stay same. (Yes I was rebundling my code and then was deploying. Also I was only making small text changes in one route just to debug as I mentioned in very start of my question. i.e. /list-bayaans vs /listBayaans
Note: I have checked this link also but it is not relevant and already have what is mentioned in this link: Trouble with deep routes on a single-page app on Firebase hosting
