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

Question

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

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

我 try catch 所有路线，但它不起作用

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>