reactjs - migrating php app to react with SSO

I have a php application which i am trying to migrate to react. i have managed to build home page.

LAYOUT

presentation layer - (SSO)

application layer

problem

I have an SSO page which is hit on every request which I have no control over. this page authenticates users and submits credentials to backend using url/api/user/sso where my.htaccess files redirects it to/index-api.php which i then deal with and redirect user to/index.html which loads react home page.

when trying to use [email protected] + the routes do not work. if i go to/#/roster my SSO page kicks in which then turns url to/index.html/#/roster. if i try/roster it saysfile not found

index.js

    import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';

import App from './App'
import reducers from './reducers';

require("babel-core/register");
require("babel-polyfill");

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
        <Provider store={createStoreWithMiddleware(reducers)}>
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        </Provider>
        , document.getElementById('root'));
Copy code

App.js

import React, { Component } from 'react'
import { HashRouter, Switch, Route, Link } from 'react-router-dom';
import Header from './components/header';
import Logout from './components/logout';
import SideBar from './components/sidebar';
import HomeContent from './components/home';
import Ldapuser from './components/ldapuser';

const Main = () => (
    <main>
     <Switch>
       <Route exact path='/index.html' component={HomeContent}/>
       <Route exact path='/home' component={HomeContent}/>      
       <Route path='/logout' component={Logout}/>
       <Route path='/ldapuser' component={Ldapuser}/>
     </Switch>
    </main>
)

class App extends Component {

    render() {
        return (
            <div>
                <Header />
                <SideBar />
                <Main />
             </div>
        );
    }
}

export default App;
Copy code

.htaccess

RewriteEngine On
# forbidden: malformed query strings

RewriteCond %{THE_REQUEST} [\?=][^0-9v] [NC]
RewriteRule ^assets/.* - [F]
RewriteCond %{THE_REQUEST} [\?=][^0-9.] [NC]
RewriteRule ^stylesheets/.* - [F]
RewriteCond %{THE_REQUEST} [\?=][^0-9.] [NC]
RewriteRule ^javascripts/.* - [F]

# forbidden: unnecessary request methods

RewriteCond %{REQUEST_METHOD} ^(CONNECT|DEBUG|DELETE|MOVE|PUT|TRACE|TRACK)
RewriteRule .* - [F]


RewriteRule ^iwsapi/(.*)$ index-api.php?url=$1 [QSA,NC,L]
RewriteRule ^api/(.*)$ index-api.php?url=$1 [QSA,NC,L]
Copy code

webpack

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        'babel-polyfill',
        './app/index.js'
    ],
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/docs',
        publicPath: '/'
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: [ 'es2015', 'es2016', 'es2017', 'latest', 'stage-0', 'react' ],
                    plugins: [ 'transform-runtime', 'transform-regenerator' ]
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: "file-loader?name=img/img-[hash:6].[ext]"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.html',
            filename: 'index.html',
            inject: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        /*new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            warnings: false,
        }),*/
        new ExtractTextPlugin("[name].bundle.css")
    ]
};
Copy code

UPDATE

the routing works if i do init load with index.html and then click within the react app on any link it renders components fine. its when trying to pre-route a url without init on/index.html

so when i open browser and then point to a route like/Hello it will not work, but when i go to/index.html then click a link to go to/Hello it will work.