javascript - 运行构建时 react 路由器动态 url 不起作用

Question

使用react的create-react-app版本。

当我在浏览器中运行构建文件夹时，React-router-dom 停止对动态 url 正常运行。

但是当从react-scripts start运行时它工作正常

import { BrowserRouter as Router, Route } from 'react-router-dom'

      <Route path="/" component={Home} exact />
      <Route path="/blog/" component={Blog} exact />
      <Route path="/blog/:id" component={BlogPost} />
      <Route path="/portfolio/:id" component={PortfolioItem} />
      <Route path="/portfolio" component={Portfolio} exact />
      <Route path="/about" component={About} exact />
      <Route path="/services/:id" component={Service} />

/blog/:id 和/services/:id 都给出 404，所有其他路由正常工作 100%，fetch 正在处理我的 api 内容、图像显示，一切都在静态 URL 上工作。

重复此操作仅在运行构建时发生。

Answer 1

创建一个文件，将其命名为“.htaccess”并将其放入其中:

  <IfModule mod_rewrite.c>
   RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>

如果它再次不起作用，请检查您的 package.json 以将 homepage 属性设置为您的主网址。