React Single Page app with browserHistory possible? - reactjs

Question

I've been building a react single page app using hashHistory from react-router, and things have been working fine until I decided to remove the trailing code in the URL that looks like this: #/?_k=ncbx6v.
The recommended solution I came across was to transition to browserHistory, but I noticed all the examples and solutions require using webpack-dev-server with history-api-fallback set to true. I tried this approach and it worked (going through localhost), but the standalone bundle.js file + index.html that once worked no longer works.
When I run webpack and open the html file, I get this error in the console:
Warning: [react-router] Location "/Users/mike/project/index.html" did not match any routes
I am not familiar with the mechanics behind the issue, but I'm curious if there's a solution out there I'm not familiar with.
This is my webpack file:
const {resolve} = require('path')
module.exports = () => {
return {
context: resolve('src'),
entry: './app',
output: {
path: resolve('public'),
filename: 'bundle.js',
publicPath: '/public/'
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
stats: {
colors: true,
reasons: true,
chunks: false
},
module: {
rules: [
{enforce: 'pre', test: /\.jsx?$/, loader: 'eslint-loader', exclude: [/node_modules/]},
{test: /\.jsx?$/,loader: 'babel-loader', include: /src/, exclude: /node_modules/
},
{test: /\.json$/, loader: 'json-loader'},
{test: /(\.css)$/, loaders: ['style-loader', 'css-loader']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
{test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml"}
]
}
}
}
And this is my app.js:
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import Layout from './components/common/Layout'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import configureStore from './store/configureStore'
import { Provider } from 'react-redux'
const store = configureStore()
class App extends React.Component {
render () {
return (
<Provider store={store}>
<Router history={browserHistory}>
<Route path='/' component={Layout}></Route>
</Router>
</Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))

Answer 1

In order to use the browser history, you will need a backend that can handle routing for all of your possible routes. If you do not plan on having a backend that can support routing (e.g., you will be serving static files) you should stick to the hash history.
The basic explanation of how browser history works is that it looks at the pathname of the current URL and attempts to match that against the known routes. In your included error, your pathname is /Users/mike/project/index.html. That means that in order for React Router to match that URL, you would have to have defined the <Route>'s path (or have a series of nested <Route>s) to be /Users/mike/project/index.html.
<Route path='Users/mike/project/index.html' component={App} />
The hash history works with static files because it just appends a hash symbol after the pathname and determines the route by what falls after that.
If your issue is just that you do not like having the query key (the ?_k=jkadjlkd), you can specify that that should not be included when you create your history instance. The URLs will still include the #, but no longer have the key "junk" attached to them.
import { Router, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
<Router history={appHistory} />