React router refresh 404

Question

I have basic react app.

    import React, { Component } from 'react'
    import ReactDOM from 'react-dom'
    import {BrowserRouter as Router, Link, Route} from 'react-router-dom'
    import registerServiceWorker from './registerServiceWorker';
    import './App.css'
    import About from './routerTest/About';
    import Users from './routerTest/Users';
    import User from './routerTest/User';

     class App extends Component {

      render() {
        return (
    <div className="App">
  <header>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/users">Users</Link>
    </header>
    <Route  path="/about"   component={About}/>
    <Route  path="/users"   component={Users}/>
    <Route  path="/" exact HomePage  render={() => <h1>HomePage</h1>}/>

    </div>
          )
      }
    }


    ReactDOM.render(
      <Router>
       <App />


      </Router>
      , document.getElementById('root'));
      registerServiceWorker();

About.js

import React from 'react'

const About = () => {
    return (`enter code here`
        <div>
            <h1>About</h1>
        </div>
    )
}

export default About

when I work on localhost everything works fine. But when I deploy it to any hosting service.(ex:alwaysdata, webhost) and refresh the page in any route it gives me error You don't have permission to access /about on this server. What is wrong here

CanUver · Accepted Answer · 2020-04-29 18:00:28Z

2

For React Router V4 Users:

<Router history={hashHistory} >
does not work in V4, please use HashRouter instead:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

answered Apr 29, 2020 at 18:00

CanUver

1,7842 gold badges10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ek4m Over a year ago

can you say why should I use hashrouter instead of normal browserRouter?

CanUver Over a year ago

I had the same problem, and I solved it using it. If you want a more detailed explanation, I suggest you read this. I referenced this place. medium.com/@swatantramishra1/…

Collectives™ on Stack Overflow

React router refresh 404

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related