React Router working on local but not work on real server-CodePudding

**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>
            
            
          </>
    
        
      );
    };

CodePudding user response：

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.

CodePudding user response：

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