react-router urls don't work when refreshing or writing manually

This will tell the IIS server to return the main page to the client instead of a 404 error and there isn't any need to use the hash history. Be sure that you are using browserHistory with this. As for reference, I will give the code for the routing, but this is not what matters. What matters is the next step after the component code below: Each web server has an ability to redirect the user to an error page in case of HTTP 404. To solve this issue, you need to redirect the user to the index page.

location.reload();​

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Netlify also supports client-side routing, you just need to create a /_redirects file with the following rule First, let's establish the problem you're having. To do that, we'll need to talk about how the browser and client-side routers work. Notice the issue yet? React Router can only load after the first successful GET request to your server (or /). The reason for the dreaded Cannot GET /* error is because, if you're at /dashboard and then hit refresh, the browser will make a GET request to /dashboard which will fail since you have no logic on your server for handling that request (since React Router is supposed to do it).

app.get('/*', function(req, res) {
   res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
      if (err) {
         res.status(500).send(err)
      }
   })
})

RewriteBase / RewriteRule ^ index\.html$ - [L] RewriteCond % {
   REQUEST_FILENAME
}!-f RewriteCond % {
   REQUEST_FILENAME
}!-dRewriteRule. / index.html[L]

location / {
   if (!-e $request_filename) {
      rewrite ^ (.*) $ / index.html
      break;
   }
}

publicPath: '/', historyApiFallback: true,

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry: './app/index.js',
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'index_bundle.js',
      publicPath: '/'
   },
   module: {
      rules: [{
         test: /\.(js)$/,
         use: 'babel-loader'
      }, {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
      }]
   },
   devServer: {
      historyApiFallback: true,
   },
   plugins: [new HtmlWebpackPlugin({
      template: 'app/index.html'
   })]
};

If your react router urls don’t work on browser refresh or when entered manually, then it means you have not configured paths on your server. Simply point all the urls to the index.html file using .htaccess, like this – Okay so here is the reason why react router urls could work while navigating within the website but not directly loading from browser – The solution is simple – Send all the routes or permalink to the index.html file. This way server will load the reactjs app and then react will decide which component to show according to the route in browser address bar.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Using React-router and it works fine while I'm clicking on link buttons, but when I refresh my webpage it does not load what I want. This problem does not happen with localhost/, this one always returns what I want. For instance, I am in localhost/joblist and everything is fine because I arrived here pressing a link. But If I refresh the webpage I get: 67651/error-react-router-urls-work-when-refreshing-writing-manually

Cannot GET / joblist

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

And this is where your trouble starts. Until now, you could get away with just placing a static HTML at the webroot of your server. But that would give 404 errors for all other URLs when requested from the server. Those same URLs work fine on the client-side, because there React Router is doing the routing for you, but they fail on the server-side unless you make your server understand them. If you want the http://example.com/about URL to work on both the server- and the client-side, you need to set up routes for it on both the server- and the client-side. Makes sense right? The answers here are all extremely helpful, what worked for me was configuring my Webpack server to expect the routes.

Cannot GET / joblist

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});