刷新React Router时出现空白页面

Question

从"/home"导航到"/dashboard"时，路由正常工作；但是当我从"/home"导航到"/profile:id"时，路由将我导航到该个人资料页面，这也可以正常工作。但是，当我刷新后，它变成空白页，没有显示任何404或重定向回主页。我正在使用以下技术：react-router: "^4.2.0"、react-router-dom: "^4.2.2" 和 react-router-redux: "5.0.0-alpha.6"。

那么，如何摆脱空白页？如果URL在 "/profile/5" 的情况下刷新，页面将导航回主页或其他适当的页面，请帮忙解决？

index.js

ReactDOM.render(
 <Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path="/" component={App} />
            <Route component={Page404} />
        </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-site')
);

App.js

<Switch>
    <Route path={`/login`} component={LoginMember} />
    <Route path={`/registermember`} component={SignUp} />
    <Authentication component={AuthenticateRoute} />
    <Route component={Page404} />
</Switch>

const AuthenticateRoute = ({ match }) => (
 <Switch>
    <Authentication path={`${match.url}`} component={MainApp} />
    <Route component={Page404} />
 </Switch>
);

主要应用程序

<Switch>                
    <Route path={`/home`} component={Home} />
    <Route path={`/profile/:id`} component={Profile} />
    <Route component={Page404} />
</Switch>

- tapan dave

---

后端是用什么开发的？Node、php？很可能是后端路由出了问题。当你刷新页面时，你访问的是应用程序中的“/profile”路由，而后端首先会拦截它，如果你只处理了根URI“/”，那么就不知道如何处理了。 - Raul Rene

@raul-reneem 我认为这不是后端的问题... - tapan dave

Answer 1

我们要解决的问题

在构建和部署应用程序到服务器时，有时刷新页面会导致空白页面。我发现解决此问题的方法在 package.json 文件中。

您当前的 package.json

请进行以下更改：

默认情况下，您的 package.json 可能包含以下内容：

"homepage": "./" 或者 "homepage": "."

在 package.json 中需要进行的更改

为了解决这个问题，只需将其更改为：

"homepage": "/"

这将确保所有内容都正确加载，包括存储、上下文、组件、redux等。

我希望这能帮助面临相同问题的人。以下是一些可能有用的额外细节：

此解决方案适用于React Router v6。

在解决这个谜团的过程中进一步解释和有趣的事实...

问题主要出现在嵌套路由中。我在非嵌套路由中进行了测试，一切都按预期工作，因此嵌套路由似乎是一个因素。

通过嵌套路由，我指的是在与原始路由不同的文件中的路由。例如，在我的应用程序中，我为客户端创建了一个首页和一个管理在首页上显示的产品的仪表板。我的文件结构如下：

-src (Folder)
--App.js (Contains two main routes of /frontpages and /dashboard, which render the files from the routes folder)
--Routes (Folder)
---Dashboard.jsx (Contains nested dashboard routes)
---Frontpages.jsx (Contains nested frontpage routes)
--Components (Folder)
---All the files that get rendered in the routes folder components.

- TheodosisKats

Answer 2

从你的代码来看，

<Switch>
  <Route path="/" component={App} />
  <Route component={Page404} />
</Switch>

<Route path="/" component={App} />会导致在每个路由中渲染App组件。因此，如果您刷新页面，Page404将无法有机会进行渲染。

解决方案：

为/添加exact属性。

<Route exact  path="/" component={App} />

- RIYAJ KHAN

---

是的，因为你除了这两个之外没有定义其他路由器。所以，如果你尝试除“/”之外的其他路由器，你将始终收到404错误。 - RIYAJ KHAN

请看，首先渲染index.js，如果找到'/'，则进入组件'App'，在'App'中，如果Auth为真，则传递给MainApp，请指导我正确的方法，以便正确实现。 - tapan dave

Answer 3

这是因为React无法定位用户导航的URL历史记录。 基本上，React属性将搜索保存在历史记录中的URL，但开发人员没有使用它。 要解决这个问题，请按照以下三个步骤操作： 像这样导入使用import { useHistory } from "react-router-dom"; 分配给一个变量并 使用所有组件都包装在其中的主div/router

- MONEYMSN

Answer 4

我最近解决了一个类似的奇怪问题。我在Visual Studio Code的Live Extension中运行一个简单的HTML和vanilla JS网站。

一开始启动时，我总是会得到黑屏，只有在强制刷新（Ctrl + F5）后才能在屏幕上看到网站内容。

简单清除浏览器缓存就解决了这个问题。

- Javed Ansari

---

这并没有回答问题。一旦你拥有足够的声望，你就可以评论任何帖子；相反，提供不需要提问者澄清的答案。- 来自审核 - 0xe1λ7r

Answer 5

我曾经遇到过这个问题，我的问题出在 package.json 文件中。我在 package.json 文件中指定了主页，例如：

.
.
"homepage": "http://mywebsite.com/relativepath"
.
.

- Hasan Zahran