0

I know maybe this topic is duplicate, but I ask because I failed to try the answer about my problem with the answer I found with the similar topic.

as the title said I want to make my route like [some-web-link].com/order, but my problem is the page works fine in localhost or when I first hit my [some-web-link].com/, but when I directly type like [some-web-link].com/order it failed and return 404 Not Found. I find it maybe because of my router like some the answer in here:

how-to-fix-react-page-not-working-after-refresh

react-router-urls-dont-work-when-refreshing-or-writing-manually

react-router-no-not-found-route

but still no luck.

this is my app.js:

import React from 'react';
import { Router, Switch, Route, Redirect, BrowserRouter  } from 'react-router-dom';
import { history } from './Helpers';
import { PrivateRoute } from './Components/PrivateRoute';

// Components
import './App.css';
import Homepage from './Components/homepage/homepage';
import Orderpage from './Components/orderpage/orderpage';
import Cart from './Components/cart/cart';
import { Login } from './Components/Login/Login';
import { Signup } from './Components/Signup/Signup';
import { Dashboard } from './Components/Dashboard/Dashboard';
import { Order } from './Components/Order/Order';
import { Product } from './Components/product/product';
import { ProductDetail } from './Components/product/productdetail/productdetail';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Router history={history}>
          <Switch>
            <Route exact path="/" component={Homepage} />
            <Route exact path="/order" component={Orderpage} />
            <Route exact path="/cart" component={Cart} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/sign-up' component={Signup} />
            {/* <Route exact path='/' render={() => (<Redirect to="/dashboard" />)} />             */}
            <PrivateRoute exact path='/dashboard' component={Dashboard}/>
            <PrivateRoute exact path='/user-order' component={Order}/>          
            <PrivateRoute exact path='/products' component={Product}/>          
            <PrivateRoute exact path='/products/product-detail/:id' component={ProductDetail}/>          
            <Route path='*' component={Homepage} />            
          </Switch>
        </Router>
      </div>    
    </BrowserRouter>
  );
}

export default App;

you can see that i tried to use redirect or catch-all but still failed. Can someone help me tell where I did wrong?

Rakis Friski
  • 551
  • 1
  • 7
  • 26
  • it is a webpack config issue not in your code – phoenixstudio Nov 25 '19 at 16:29
  • It is the same problem. What is the server technology that you are using ? Configure your server such that any request to it will serve the same html file with your app bundle in it to fix this problem. – Subin Sebastian Nov 25 '19 at 17:59
  • Can you add your server code? This is definitely an issue with how the build is served up, not with the code – Jake Luby Nov 25 '19 at 18:05

1 Answers1

1

After Trying and searching for several days, finally I can solve this problem, this answer is for you who find the same problem with routing behaviour when you tried to klik your link like [web-url].com/some-page and find it 404 but you can hit it by hitting your url like [web-url].com without any problem, I fix this problem by adding .htaccess file inside your public folder in [your-project-name]/public then your file will have this path such as [your-project-name]/public/.htaccess with this 4 line,

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . ./index.html [L]

and it works like charm. this line force your link to direct to the root first and after that find the page through your web route so you can fix 404 not Found problem with this

if someone have any better idea than this, feel free to add my answer about this

Rakis Friski
  • 551
  • 1
  • 7
  • 26