小编Jen*_*nna的帖子

Netlify 在页面刷新时呈现 404(使用 React 和 react-router)

我已经使用 Netlify 部署了我的站点,但在路由方面遇到了问题。

这是我的网站:https : //redux-co.netlify.com/

还有我的 GitHub 仓库:https : //github.com/jenna-m/redux-co

具体来说,如果用户导航到主页以外的任何页面并刷新页面,则默认 Netlify 404 呈现。从 404 页面,如果我导航回主页并刷新,则呈现主页。

此外,我的自定义 404 页面无法像我打开时那样工作localhost:3000,但我想在处理我的自定义 404 组件之前先弄清楚这个刷新问题。

我正在使用 React 和 react-router,我知道由于我使用的是 react-router,我的网站不会立即部署。


这是我的_redirects文件,它在/public我的index.html文件所在的文件夹中:

/*    /index.html   200
Run Code Online (Sandbox Code Playgroud)

这是我“build”位于package.json

…
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && cp build/index.html build/404.html",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
…
Run Code Online (Sandbox Code Playgroud)

我读过其他人遇到过这种情况以及他们为克服这个问题所做的工作。这是我到目前为止所引用的……

https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/

https://hugogiraudel.com/2017/05/13/using-create-react-app-on-netlify/

这个人使用的是 Vue 而不是 React,但我还是尝试了这些解决方案:

https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649

https://github.com/vuejs/vuepress/issues/457#issuecomment-463745656

http-status-code-404 reactjs react-router netlify

34
推荐指数
4
解决办法
1万
查看次数

React Router <Link> 和 <Route> 没有将状态传递给组件

React Router:链接和路由不将状态传递给组件

我正在使用 React、Redux 和 React Router 构建一个在线购物应用程序。在主页上,显示所有项目。我希望用户能够单击图像并被带到包含该项目的项目详细信息的页面。

这是我尝试这样做的方法:

  • 在 App.js 中,我使用 BrowserRouter、Route 和 Switch 进行路由
  • 在 Home.js 中,我使用 react-router 的链接将主页上的图像链接到项目详细信息页面;Link 应该将 ID 作为状态传递给 Item 组件(请参阅下面的 Home.js 代码)
  • Item.js 应该呈现项目详细信息页面。项目的 ID 将传递给 Item 组件,该组件将呈现该项目的详细信息。

这看起来很简单,我在 SO 和网络上看到了很多关于这个的讨论。以下是我已经尝试过的一些:

单击 React Router 中的 Link 后显示项目详细信息

反应路由器如何单击以详细了解组件

通过 React-Router v4 <Link /> 传递值

Tyler McGinnis - 将道具传递给 React Router 的 Link 组件

Medium - 如何将 props 传递给 React 路由组件

我能够获取要更改的 URL 以对应于项目的 ID,但我无法让 Item 组件使用正确的信息呈现,有时我会收到错误消息,具体取决于我使用的方法。我在 Item.js 的 div 中硬编码了“Item Component”这个词,当我点击主页上的图像时,它就会呈现出来。否则,什么都不会渲染我收到以下两个TypeErrors:

应用程序.js: …

reactjs react-router react-redux

4
推荐指数
1
解决办法
5984
查看次数

使用托管在 GoDaddy 上的 React 应用程序,react-router 在页面刷新时抛出 404

我使用 GoDaddy ( http://normaned.com )部署了一个 React 网站,但我的react-router路由在刷新时无法正常工作时遇到问题。单击链接按预期工作,但如果刷新页面,则会显示 404 页面。我正在使用BrowserRouterreact-router.

GoDaddy 托管计划是“Economy Windows Hosting with Plesk”。不幸的是,我不是设置托管服务的人,而且我不确定我是否可以从 Plesk 更改为 cPanel 而无需额外的金钱成本... (即,Windows 与 Linux 托管)。

编辑 10/19:我现在意识到服务器是 Windows IIS 服务器,我需要一个web.config文件(不是.htaccess文件)。尽管如此,我仍然不确定web.config文件中需要哪些代码。

这是我用于该网站的 GitHub 存储库:https : //github.com/jenna-m/norman-ed


我已经尝试过我在 StackOverflow、GoDaddy 帮助论坛和其他地方找到的建议方法,但它仍然不起作用。以下是我尝试过的一些事情:

/sf/answers/2841436881/

https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

我尝试将以下内容添加到根目录中的.htaccess文件中public_html

<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] …
Run Code Online (Sandbox Code Playgroud)

.htaccess plesk reactjs react-router plesk-onyx

3
推荐指数
2
解决办法
5231
查看次数