Btukfyl

My react application is working fine on localhost but when after i deployed it in gh-pages or surge it does not give me to move among pages using URL.

• This is the project repo link


• Demo url here
  

users can go to signup page by clicking menuItem of top right corner. but If user use http://chat.susi.ai/signup/ URL, it gives 404 page

I tried several solutions from internet but didn't work.

Next question is : I created a 404 page to show up when user tries to move to broken links.It works fine in localhost. but not in production. I tried this solution but nothing changed.

this is part of my index.js file

const App = () => (

    <Router history={hashHistory}>

        <MuiThemeProvider>

            <Switch>

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

                <Route exact path="/signup" component={SignUp} />

                <Route exact path="/logout" component={Logout} />

                <Route exact path="/forgotpwd" component={ForgotPassword} />

                <Route exact path="*" component={NotFound} />



            </Switch>

        </MuiThemeProvider>

    </Router>

);



ReactDOM.render(

    <App />,

    document.getElementById('root')

);

If someone can suggest good solution with sample code for my problems that would be really helpful for me.

This is happening because users aren't being served the index.html which bootstraps your app when they visit those URLs directly.

For surge, you can add a 200.html file which contains the same contents as the index.html you're deploying (or just rename it to 200.html) - this will then be served to users at any URL they visit which doesn't correspond to a static file, allowing your app to start running.

Edit: looks like you're using create-react-app. This works when you're developing locally because create-react-app's react-scripts package handles serving your index.html as a fallback for these requests.

The react-scripts user guide has sections on how to handle this when deploying to GitHub Pages and surge.sh (as above).

Changing .htaccess file in the case of using apache as the web server in your build folder worked for me:

Options -MultiViews

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

I had the same problem. And i solved it very easily... :)

I used react at my front-end(Create-React-App) and an express backend.
In dev mode all things works great but when i switched to the production build there was some routing issues in my react routing. After a long survey i found that the problem is on the server side serving up the the index.html file.

It should be after all the server side routing but before all the app.post handler. In other words the following line should be placed after all app.gets and before all app.posts

// PRODUCTION

App.get('*', (req, res)=>{

res.sendFile(path.resolve(where, the, index.html, is))

})