react-router-dom - navigate directly to route

Question

When using react-router-dom, should I be able to create a route and navigate to it by manually entering its path in the URL?

const App = () =>
<Provider store={store}>
    <Router>
        <div>
            <Route exact path="/" component={QuotesLandingPage} />
            <Route path="/prequote" component={LoadingSpinner} />
        </div>
    </Router>
</Provider>;

So, I will be on localhost, and when I manually type '/prequote' to the end of the url in the navbar it doesn't redirect to the component I have specified, instead it throws a 404.

Is that expected behavior?

I have been searching for an answer and seen some suggestions that configuring webpack (I am using webpack) to have devServer.historyApiFallback = true should work but it hasn't worked for me.

Answer 1

Maybe you have the same confusion about historyApiFallback as I once did. I will quote from https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option:

However, if you have modified output.publicPath in your Webpack configuration, you need to specify the URL to redirect to. This is done using the historyApiFallback.index option.

historyApiFallback: {
  index: '/foo-app/'
}

In my case I finally got it by changing the historyApiFallback option to:

historyApiFallback: {
    index:'dist/'
},

regard it as index:'dist/index.html', to be served instead of the devServer throwing 404.

Cheers