CODEWITHSUNDEEP
reactjs
spaceWalker
spaceWalker

Reputation: 169

React Router working on local but not work on real server

**When i try at local route is working but why not working on product ? i get 404 not found error. **

 const App = () => {
      return (
          <>
            <Header/>
          <Router basename="/"  >
            <Routes>
                <Route path="/Cannabis" element={<RandomCannabis/>} />
                <Route path="/Random_User" element={<GetUser/>} />
                <Route path="/Images" element={<RandomImage/>} />
                <Route path="/Dogs" element={<Dog/>} />
                <Route path="/Giphy" element={<Giphy/>} />
                <Route path="/Cats" element={<Cat/>} />
                <Route path="/"     element={<Home/>} />
                <Route path='*' element={<Error/>} />
            </Routes>
            </Router>
            
            
          </>
    
        
      );
    };

Upvotes: 3

Views: 7102

Answers (3)

Timileyin Abidoun
Timileyin Abidoun

Reputation: 101

After deploying your code online. All you just need to do is to create a new file (on your project file home directory). The file name should be

.htaccess

Then paste the following code into the .htaccess file that you created:

<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>

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php56” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php56___lsphp .php .php5 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

Upvotes: 1

Caio Mar
Caio Mar

Reputation: 2624

Try something like this:

import { Route, Switch } from "react-router-dom";

<Switch>
    <Route
      exact
      path={ROUTES.SIGN_IN_UP}
      render={(props) => <SignInUpPage {...props} />}
    />
    <Route
      exact
      path={ROUTES.ORDER}
      render={(props) => <Order {...props} />}
    />
    <Route
      exact
      path={ROUTES.ORDER_CONFIRM}
      render={(props) => <OrderConfirm {...props} />}
    />
</Switch>;

Upvotes: 0

spaceWalker
spaceWalker

Reputation: 169

If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:

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

It will get copied to the build folder when you run npm run build.

Upvotes: 9

Related Questions