react routing is able to handle different url path but tomcat returns 404 not available resources
<p>I have a little project in <code>reactjs</code> to play with and learn it. I need to have to type of headers which will be shown based on url paths. So the following is my <strong>index.js</strong> which handles the routing:</p>
<pre><code> const history = useRouterHistory(createHistory)({
     basename: '/test'
})
class Tj extends React.Component {

render() {

    return (
        &lt;Router history={history}&gt;
            &lt;Route path={&quot;/&quot;} component={Bridge} &gt;
                &lt;IndexRoute component={Home} /&gt;
                &lt;Route path={&quot;user&quot;} component={T} /&gt;
                &lt;Route path={&quot;home&quot;} component={Home} /&gt;
            &lt;/Route&gt;
            &lt;Route path={&quot;/t/&quot;} component={Bridge2} &gt;
                &lt;IndexRoute component={T} /&gt;
                &lt;Route path={&quot;contact&quot;} component={Home} /&gt;
            &lt;/Route&gt;
        &lt;/Router&gt;
    );
}
}
render(
&lt;Provider store={store}&gt;
    &lt;Tj/&gt;
&lt;/Provider&gt;,
window.document.getElementById('mainContainer'));
</code></pre>
<p>As you can see I am using test as a root directory and based on user's input for url I decide which header should I use. Also here is <strong>Bridge2.js</strong>:</p>
<pre><code>export class Bridge2 extends React.Component {
render() {

    return (
        &lt;div&gt;
            &lt;div className=&quot;row&quot;&gt;
                &lt;Header2/&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row&quot;&gt;
                {this.props.children}
            &lt;/div&gt;
        &lt;/div&gt;
    );
}
}
</code></pre>
<p>and <strong>Bridge.js</strong>:</p>
<pre><code>export class Bridge extends React.Component {
render() {
  //  alert(this.props.children.type);
    var Content;

    if(this.props.children.type){
    Content=&lt;div&gt;
        &lt;div className=&quot;row&quot;&gt;
            &lt;Header/&gt;
        &lt;/div&gt;
        &lt;div className=&quot;row&quot;&gt;
            {this.props.children}
        &lt;/div&gt;
    &lt;/div&gt;;
    }
    else{
        Content=&lt;div&gt;
            &lt;div className=&quot;row&quot;&gt;
                &lt;Header/&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row&quot;&gt;
                {this.props.children}
            &lt;/div&gt;
        &lt;/div&gt;;
    }
    return (
        Content
    );
}
}
</code></pre>
<p>When I run this in webpack dev server every thing works fine. For instance when I use <code>http://localhost:3003/test/</code> bridge.js is loaded and if I run <code>http://localhost:3003/test/t/</code> bridge2.js is loaded which is expected.</p>
<p>However since web pack dev server is not a production server I use tomcat and for now I use the eclipse web application project and I copied my bundle.js file and index.html over there. Now the problem is when I run the tomcat server it is able to recognize and show this path fine:</p>
<p><code>http://localhost:8080/test/</code> but when for <code>http://localhost:8080/test/t/</code> I get:</p>
<blockquote>
<p>HTTP Status 404 - /test/t/</p>
</blockquote>
<p>which basically says the resource file is not available. As far as what I observe this is not a problem in coding since routing works fine in web pack dev server but when it comes to tomcat it seems that react routing is not able to handle it. Is there anything wrong with what I am doing? Is doable this way at all?</p>