Page not found when hard refresh - Reactjs

Question

I'm developing ReactJs Application.I'm getting page not found (404) error when i hard refresh the build page.but its work fine (page routing) with button click.

index.js

ReactDOM.render(<Provider store={store}>
    <BrowserRouter>
        <div>
            <div className="wrapper">
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/profile" component={Profile} />
                    <Route path="/faq" component={Faq} />
                    <Route path="/privacy" component={Privacy} />                    
                </Switch>
            </div>
        </div>
        </BrowserRouter>
</Provider>, document.getElementById('root'));

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    port: 3000,
    historyApiFallback: true
  },
}

browser console

i got this error,when i tried to run my build bundle.but it's work charmly when i run npm start. (404 got when run build app)

Check this - https://stackoverflow.com/questions/32150653/apache-web-server-doesnt-allow-me-to-refresh-on-about-but-on-localhost-its-wor and this - https://dzone.com/articles/how-use-htaccess-file — ravibagul91, Sep 03 '19 at 09:11

score 1 · Answer 1 · answered Sep 03 '19 at 09:08

1

If you running this on server, most likely the server configuration matches the url, and responds the 404 without react.

answered Sep 03 '19 at 09:08

Sándor Tóth

743
4
10

f.jafari · Answer 2 · 2019-09-03T10:36:43.853

0

You need to use an exact path for / ,otherwise it will match with nothing, it means path="" then cannot find this address in routing so get the page(404).

 <Route exact path="/" component={Home} />

also, you can try below way path="", it should works.

<Route path="" component={Home} />

edited Sep 03 '19 at 10:36

answered Sep 03 '19 at 09:29

f.jafari

568
3
10

i've tried both ways.but still show 404 when refresh – Yasiru Attanayake Sep 03 '19 at 10:13
in render function try this if (window.location.pathname==='"') { return ; } set "/" to Home component and try it – f.jafari Sep 03 '19 at 10:31

score 0 · Answer 3 · answered Sep 03 '19 at 09:57

0

    <Route component={400page} />

look if the user add router not found it will be shown page not found an error Now if the user isn’t at / or /profile,faq, privacy the 400pagecomponent will be rendered.

read this articles it will explain clear

answered Sep 03 '19 at 09:57

Mohammed Al-Reai

2,344
14
18

Page not found when hard refresh - Reactjs

3 Answers3