如果刷新页面则找不到 React Router URL - 创建 React App

Question

我有一个具有不同页面（路由器）的 React 应用程序。我可以从一个页面转到另一个页面，刷新页面，一切都在本地工作得很好。

如果我部署应用程序npm run built并将其上传到我的主机 infinityfree.net ，并且一直想刷新页面或使用直接链接，则会收到 404 错误。

我尝试捕获所有路线，但它不起作用

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <ul>
            <li><Link to="/">Main</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/SomethingElse">Something else</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/about" component={About} />
            <Route path="/SomethingElse" component={SomethingElse} />
          </Switch>
        </div>
      </Router>
    );
  }
}

有小费吗？谢谢你！

Answer 1

一旦您在不同的路由中刷新页面，您的 http 服务器将无法获取与该路由对应的文件，因为它不存在

所以你必须将所有路由重定向到index.html应用程序的根目录

因此，如果您使用 apache，您可以添加.htaccess到项目的根目录，这就是它的内容

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