React router is not able to handle routes and give back warning of did not match

Question

I have a sample project just to play with react and get an idea how it works.

For development environment I use webpack dev server but this is not enough for actual deployment. Apparently when it comes to actual deployment it seems that there is no good solution and the only thing I could find was using heroku which I cannot have my application under my domain and should end with heroku which is not acceptable in real world development (please correct me if I am wrong since I am not sure what is the best way to deploy my web app).

To deploy my app the only way I could think of was using tomcat. So I copied the bundle.js and index.html file of my project and put it in the WebContent of eclipse IDE. The following is the index.js file:

import {render} from "react-dom";
import React from "react";
import {Router, Route, browserHistory, useRouterHistory, IndexRoute} from     "react-router";
import { createHistory } from 'history';
import {Provider} from "react-redux";
import Home from "./container/Home";
import {Bridge} from "./router-bridge/Bridge";
import {T} from "./components/T";
import store from "./store";



class Tj extends React.Component {

   render() {
        const history = useRouterHistory(createHistory)({
       basename: '/test'
       });
    return (
        <Router history={history}>
            <Route path={"/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"/test/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"home"} component={Home} />
        </Router>
    );
  }
 }
  render(
   <Provider store={store}>
    <Tj/>
</Provider>,
window.document.getElementById('mainContainer'));

So when I use web pack dev server, my router works fine but when I copy the files to the web content of eclipse project ( which will consequently set up everything for me and make the project deplyable and reachable with this Url http://localhost:8080/test/index.html) I get the following error in my browser console:

Warning: [react-router] Location "/test/index.html" did not match any routes

I also looked at some posts similar to this such as :

similar posts

But I could not resolve my issue. Can anyone help?

Answer 1

By default, React Router assumes that the location of your app is at the root of your site (/). When you host your site in the /test directory, React Router doesn't know that unless you specify it. What you need to do is to "enhance" your history using the useRouterHistory history enhancer by specifying the basename (/test).

Right now you are using the browserHistory that is included by React Router, but you will need to create your own history instance that knows about the basename.

import { useRouterHistory, Router } from 'react-router'
// createHistory creates a browser history instance
import { createHistory } from 'history'

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

class App extends React.Component {

  render() {
    return (
      <Router history={history}>
        ...
      </Router>
    )
  }
}

Also, you can use your own domain with Heroku, but you have to be a paying customer (or at least have a credit card attached to your account).