React BrowserRouter 在 localhost 上导航时工作。部署时刷新非主页抛出 404 not found答案

【问题标题】：React BrowserRouter works when navigating on localhost. Refreshing a not-home-page when deployed throws 404 not foundReact BrowserRouter 在 localhost 上导航时工作。部署时刷新非主页抛出 404 not found
【发布时间】：2021-12-28 19:51:23
【问题描述】：

我的代码正在使用 React-router-dom。它适用于页面内所有导航的 gh 页面。但是，通过添加 /blog 到 url 或刷新 /blog 页面访问返回 404 未找到。该应用程序的结构如下：

App.js

function App() {
  return (
    <div className="App" >
      <header className="App-header" width="100%" >
          <BrowserRouter basename="/">
            <Switch>
            <Route component={Main} exact path="/" /> 
            <Route component={Blog} exact path="/blog" /> 
            </Switch>
          </BrowserRouter>
      </header>
    </div>
  );
}
export default App;

博客.js：

function Blog() {
  return (
    <div className="App" >
      <header className="App-header" width="100%" >
        <div id="home" width="100%">
          <BrowserRouter id="blog">
              
              <div>
                <Route component={AllPosts} exact path="/blog/"  />
                <Route component={OnePost} exact path="/blog/:slug" />
              </div>
              
          </BrowserRouter>

          <SidebarIfBrowser />

        </div>
      </header>
    </div>
  );
}

export default Blog;

我是否错过了一些重要的东西？

【问题讨论】：

你用的是什么版本的 react-router？
反应路由器 v5
太棒了，我想我的新答案会为你解决这个问题

标签： javascript reactjs react-router-dom

【解决方案1】：

问题似乎与您如何使用嵌套路由有关。

首先在App.js 中删除确切的，因为你不希望它是精确的

// App.js
<Switch>
    <Route component={Main} exact path="/" /> 
    <Route component={Blog} path="/blog" /> 
</Switch>

现在在您的Blog.js 中，您需要进行一些修改。首先是将您的BrowserRouter 替换为Switch。您只想在整个应用程序中拥有 1 个BrowserRouter，它应该处于高级别，这就是您在 App.js 中拥有的内容。
然后你想改变你的路线中的paths。您不需要在其中包含/blog/，因为它们是/blog 路由中的嵌套路由，来自您的App.js 从技术上讲，您之前拥有的应该是/blog/blog

// Blog.js
function Blog() {
  return (
    <div className="App" >
      <header className="App-header" width="100%" >
        <div id="home" width="100%">
          <Switch>
              <div>
                <Route component={AllPosts} exact path="/"  />
                <Route component={OnePost} exact path="/:slug" />
              </div>
          </Switch>

          <SidebarIfBrowser />

        </div>
      </header>
    </div>
  );
}

export default Blog;

请注意，这仅适用于 react-router v5，如果您使用的是 v6，则需要进行一些其他更改

【讨论】：

这确实是正确的。此外，Olivier Boisse 的回答对于使其在 github 页面上运行是必要的。我将 BrowserRouter 换成了 HashRouter，这很容易解决。

【解决方案2】：

在将 SPA 部署到 github 页面时，这是一个众所周知的问题。为了让客户端路由正常工作，每个请求都必须重定向到index.html，并且这个行为不是由github页面实现的。

这在create react app documentation 中有解释。看来您有两种解决方案：

从使用 HTML5 历史 API 切换到使用哈希路由
关注此guide。您必须将自定义 404.html 页面添加到您的项目，并将自定义脚本标签添加到您的 index.html 页面。我已经使用过这个解决方案，对我来说效果很好。

【讨论】：

【解决方案3】：

发生这种情况是因为您在服务器上针对不存在的路由发出 GET 请求。您可以按照以下步骤解决此问题：

1.在你的 package.json 中指向主页

 {
    ...
    "homepage": ".",
    ...
}

2。创建一个 .htaccess 文件并将其放在应用的根目录中

RewriteEngine On
  RewriteCond %{HTTP_HOST} ^www\.
  RewriteRule ^(.*)$ https://yourdomain.com/$1 [R=301,L]
        
RewriteEngine On
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

注意：这仅在您部署 React 应用时有效。在开发中，您可以仅使用 React Router 访问任何路由。

【讨论】：