Rendering UI in React Router 4 - reactjs

Question

I am still fairly new to ReactJS especially the routing portion of it. I have a couple of questions which I tried many solutions i found on stackoverflow but nothing seems to be helping me:
When i start my react project locally, i get localhost:3000. What if I want it to be shown as localhost:3000/extension/?
When i navigate about my project i can render the different pages. However, if i enter the URL directly into the browser, a blank page is rendered. There is no error. I read somewhere saying that my components are not connected to my routes. I am not sure what I need to do to correct it.
How can i ensure history is properly being utilized?
routes.js:
const RouteList = () => (
<Switch>
<Route path="/extension/" exact component={withRouter(HomePage)} />
<Route path="/extension/something" exact component={withRouter(SomethingPage)} />
<Route component={Error} />
</Switch>
);
App.js:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render () {
return (
<Router history={browserHistory}>
<div>
<Header />
<RouteList />
<Footer />
</div>
</Router>
);
}
}
export default App;
--EDIT--
Added my webpack.config.js
const commonConfig = {
resolve: {
modules: [path.resolve('./src'), 'node_modules'],
extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]
},
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: 'htmlhint-loader', options: { configFile: '.htmlhintrc' } }],
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /\.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(\? v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
use: [{
loader: 'html-loader'
}],
test: /\.html$/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
if (module.resource && (/^.*\.
(css|less|scss)$/).test(module.resource)) {
return false;
}
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/images',
to: ''
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.optimize.ModuleConcatenationPlugin()
]
};
const devConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',
'webpack-hot-middleware/client?reload=true']
},
target: 'web',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/dev_build'),
filename: '[name].bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.scss/,
include: path.resolve(__dirname, 'src/styles'),
use: ['style-loader', 'css-loader', {loader: 'sass-loader', options:
{sourceMap: true}}]
},
{
test: /\.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader?modules']
},
{
test: /\.css$/,
include: [/node_modules/],
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: 'src',
compress: true,
hot: true,
port: 3000,
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: {
disableDotRule: true,
index: 'build/index.html'
},
stats: 'minimal',
overlay: true,
proxy: {
'/api/**': {
target: {
port: 8080
},
secure: false
},
'/actuator/**': {
target: {
port: 8080
},
secure: false
},
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
Please help cause I am not sure what I am doing wrong and i am splitting my brains over this. Thanks.

Answer 1

You can add a Redirect from / to /extension if you want that to be the landing page.
const RouteList = () => (
<Switch>
<Redirect from='/' to='/extension/'/>
<Route path="/extension/" exact component={HomePage} />
<Route path="/extension/something" exact component={SomethingPage} />
<Route component={Error} />
</Switch>
);
Your app currently only works when visited on / because your server will only serve index.html for the index route. You can use historyApiFallback if you want the index.html file to be served instead of any 404 responses.
webpack.config.js
module.exports = {
//...
devServer: {
historyApiFallback: true
}
};