CODEWITHSUNDEEP
reactjsreact-routerovh
Thebeginner
Thebeginner

Reputation: 143

React Routing works in local but not on my web hosting

I have a React app which works perfectly on my local but my route doesn't work on my web hosting (OVH web cloud).

I have checked many post which talk about it and I tried to follow their recommendation but I think I'm missing something.

If I understand well, I can't access to www.mysite/login because in my dist folder there is no login.html.

So I tried to create a static.json like this

{
    "root": "dist/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

and a .htaccess in my public repository

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

here is my index.js

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>, 
  document.getElementById('root'))

here is my App.js

class App extends Component {

    render() {
        return (
            <IntlProvider locale={language} messages={messages}>
                <div className="App">
                    <div className="App-content">
                        <div className="menu">
                            <Navbar handleLanguage={langValue => this.langChange(langValue)} language={language} />
                        </div>
                        <Main language={language}/>
                    </div>
                </div>
            </IntlProvider>
        );

and here is my Main.jsx

export class Main extends React.Component {
    render (){
        return (
            <Switch>
                <Route exact path="/" render={(props) => <Home {...props} language={this.props.language}/>} ></Route>
                <Route path='/login' component={Login} ></Route>
            </Switch>
        );
    }
}

I guess if I can use a button which does this.props.history.push('/login') I will access to my login page, but actually I can't do this kind of button on the homepage but it's another problem.

Do you know if I'm missing something or not ? because I'm struggling since 5hours and I think I checked every post about this issue even the official doc.

Thank you for your help

EDIT:

I forgot to show my express configuration for this

//app.js
const express = require('express');
const http = require('http');
const path = require('path');

let app = express();
app.use(express.static(path.join(__dirname, 'dist')));

// Handles any requests that don't match the ones above
app.get('/*', (req,res) =>{
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

Upvotes: 1

Views: 2950

Answers (1)

Anil Kumar
Anil Kumar

Reputation: 2309

All you request should go to index.html which is starting point for your app.

set router with below configuration.

<BrowserRouter basename="/directory-name">
 <App/>
</BrowserRouter>

Upvotes: 3

Related Questions