javascript - 在特定网址中刷新时找不到构建后的Reactjs(Reactjs after build got not found when refresh in a specific Url)

Question

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 .

(如标题所述，我想使路由类似[some-web-link] .com / order ，但是我的问题是该页面在localhost或当我第一次点击[some-web-link] .com /时工作正常 ，但是当我直接键入[some-web-link] .com / order时，它失败并返回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:

(这是我的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?

(有人可以帮我说我做错了什么吗？)

  ask by Rakis Friski translate from so

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

(经过数天的尝试之后，终于可以解决此问题，当您尝试链接[web-url] .com / some-page之类的链接并找到它时，此答案适用于那些发现相同的路由行为问题的人404，但是您可以通过像[web-url] .com这样的URL来打它，没有任何问题，我通过在[your-project-name]/public public文件夹内添加.htaccess文件来解决此问题，该路径，例如[your-project-name]/public/.htaccess并带有这4行，)

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

(这行代码会强制您的链接首先直接指向根，然后再通过网络路由找到该页面，因此您可以修复404 not found问题)

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

(如果有人有比这更好的主意，请随时添加我对此的答案)