CODEWITHSUNDEEP
reactjsreact-router
Ek4m
Ek4m

Reputation: 15

React router refresh 404

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

Upvotes: 0

Views: 206

Answers (1)

CanUver
CanUver

Reputation: 1774

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>

Upvotes: 2

Related Questions