页面在刷新时不加载 - react-router-dom
Posted
技术标签:
【中文标题】页面在刷新时不加载 - react-router-dom【英文标题】：page doesn't load on refresh - react-router-dom 【发布时间】：2019-01-05 01:35:35 【问题描述】：我有以下页面的基本反应应用程序：主页、个人资料、联系人和经验。我已经为每个页面设置了路由，但是当我转到主页以外的其他页面时，它会呈现，但是当我刷新页面时，页面不会加载。
我注意到如果我在页面名称之前添加#，例如页面呈现的http://localhost:1234/#/profile。所以我很困惑为什么我需要我不想要的#，而我正在使用react-router-dom，所以不需要#。
我将historyApiFallback 添加到我的 webpack.config 中，但这不起作用。谁能帮我这个？我是新手，我想尽可能多地学习。您的帮助将不胜感激！
App.jsx
import React, Component from "react";
import Navbar from "./components/navbar";
import Intro from "./components/introPage";
import Experience from "./components/experiencePage";
import Profile from "./components/profilePage";
import Contact from "./components/contactPage";
import BrowserRouter as Router, Link, Route from 'react-router-dom';
class App extends Component
render()
return (
<Router>
<div className="pageSections">
<Navbar />
<div className="navContent">
<Route exact path="/" component=Intro/>
<Route path="/experience" component=Experience/>
<Route path="/profile" component=Profile/>
<Route path="/contact" component=Contact/>
</div>
</div>
</Router>
);
export default App;
navbar.jsx
import React, Component from "react";
import Link from "react-router-dom";
class Navbar extends Component
render()
return (
<div className="navFrame">
<Link to="/">
<div className="topNav"><div className="navBar"><h3>Marteen</h3></div></div>
</Link>
<Link to="/profile">
<div className="rightNav"><div className="navBar"><h3>Profile</h3></div></div>
</Link>
<Link to="/experience">
<div className="bottomNav"><div className="navBar"><h3>Experience</h3></div></div>
</Link>
<Link to="/contact">
<div className="leftNav"><div className="navBar"><h3>Contact</h3></div></div>
</Link>
</div>
);
export default Navbar;
webpack.config.js
const webpack = require('webpack');
const config =
entry: __dirname + '/js/index.jsx',
output:
path: __dirname + '/dist',
filename: 'bundle.js',
,
resolve:
extensions: ['.js', '.jsx', '.css']
,
module:
rules: [
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
,
test: /\.scss?/,
loader: 'style-loader!css-loader!sass-loader'
]
,
devServer:
historyApiFallback: true,
contentBase: './',
hot: true
;
module.exports = config;
package.json
"main": "index.js",
"scripts":
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch",
"start": "npm run open",
"open": "concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234\""
,
"devDependencies":
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.6.1",
"css-loader": "^0.28.11",
"http-server": "^0.11.1",
"node-sass": "^4.7.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12"
,
"dependencies":
"npm": "^5.10.0"
更新
package.json
"name": "fullstack_profile",
"version": "1.0.0",
"description": "fullstack profile with flask and react",
"main": "index.js",
"scripts":
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack-dev-server --hot --progress --mode development",
"start": "npm run open",
"open": "concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234\""
,
"repository":
"type": "git",
"url": "git+https://github.com/medev21/fullstack_profile.git"
,
"author": "martin",
"babel":
"presets": [
"es2015",
"react"
]
,
"license": "ISC",
"bugs":
"url": "https://github.com/medev21/fullstack_profile/issues"
,
"homepage": "https://github.com/medev21/fullstack_profile#readme",
"devDependencies":
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.6.1",
"css-loader": "^0.28.11",
"http-server": "^0.11.1",
"node-sass": "^4.7.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.5"
,
"dependencies":
"npm": "^5.10.0"
webpack.config
const webpack = require('webpack');
const config =
entry: __dirname + '/js/index.jsx',
output:
path: __dirname + '/dist',
filename: 'bundle.js',
,
resolve:
extensions: ['.js', '.jsx', '.css']
,
module:
rules: [
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
,
test: /\.scss?/,
loader: 'style-loader!css-loader!sass-loader'
]
,
devServer:
contentBase: __dirname + '/dist',
compress: false,
port: 1234,
historyApiFallback:
index: 'index.html'
;
module.exports = config;
【问题讨论】：
我知道 gatsby 使用 localhost:1234 - 这就是你用来做这个的吗？我不认为 react-router 是你自己在 gatsby 中实现的——它们有一个链接组件，你可以下载/安装来实现这一点。如果我在几英里之外，请道歉。 你试过devServer: contentBase: path.join(__dirname, 'dist'), ... 吗？
【参考方案1】：
http://localhost:1234/#/profile 起作用的原因是因为 # 不会重新加载页面。它的行为与 HTML 中的锚标记相同，您停留在同一页面上但滚动到它的特定部分。例如，下面将您滚动到页面的投资组合部分。
<a href="www.page.com/#portfolio">Portfolio</a>
如果省略#，则不同。这告诉您的服务器重新加载页面并访问该位置。在您的情况下，服务器不知道 http://localhost:1234/profile，因为您没有在服务器端指定它。在这些情况下，您需要在找不到路由时创建路由或代理请求。
由于您使用的是客户端路由器 react-router，因此服务器需要提供相同的文件，因此您应该使用代理选项。
当使用http-server the docs 时，可以添加 -P 或 --proxy 标志来指定它。
-P 或 --proxy 代理所有无法在本地解析到给定 url 的请求。例如：-P http://someurl.com
在您的情况下，更新您的 package.json 中的以下内容。
"open": "concurrently \"http-server -a localhost -p 1234 -P http://localhost:1234\" \"open http://localhost:1234\""
另一种方法是使用webpack-dev-server 进行开发。它将极大地改善您的开发人员体验，因为它支持组件更改时的热重载。
使用npm install --save-dev webpack-dev-server安装它
将以下内容添加到您的 webpack 配置中。
devServer:
contentBase: __dirname + '/dist',
compress: false,
port: 1234,
historyApiFallback:
index: 'index.html' // assuming this is your entry point file that loads your bundle.
,
然后在你的 package.json 中为其添加一个脚本并使用 npm run watch 运行它
"watch": "webpack-dev-server --hot --progress --mode development",
注意：确保在您的 dist 文件夹中存在 index.html。如果不是，您将遇到问题。
我创建了一个basic project on GitHub，所以你有一个工作示例。
【讨论】：
我选择了后一个选项，但仍然遇到同样的问题；安装了webpack-dev-server 并添加了watch。不确定我是否遗漏了什么，如何在服务器端指定 url？
在使用客户端渲染时，无需在服务器上指定这些 URL。服务器/开发服务器唯一需要知道的是，当它在服务器上找不到文件/目录时，它需要提供一个备用文件。这就是你所需要的。
至于加载页面的主文件。您能否验证路径是否正确以及索引文件是否按指定命名？确保正确设置了 contentBase 和 historyApiFallback: index: 选项。他们是这里的关键。如果它们不是，服务器将没有适当的回退，您将收到页面找不到错误。
我在devserver 中设置了以下内容：contentBase: __dirname + '/dist', 和historyApiFallback: index: 'index.html' 。仍然遇到同样的问题，当我刷新页面时页面出现错误，找不到页面。
你在运行npm run watch吗？您应该在访问localhost:1234 之前。我创建了一个基本项目，因此您可以看到它的实际效果。您可以在 GitHub 上找到它【参考方案2】：
Express 和至少 Heroku 部署的解决方案
我想分享我的解决方案，该解决方案最终允许用户访问我的 React 应用程序中的每个链接。
在阅读了这些建议的解决方案和 this helpful article 之后，我可以设法在我的主要 server.js 文件中使用以下代码使其工作：
// Serve static files such as images, CSS files, and javascript files for the React frontend app
app.use(express.static(path.join(__dirname, 'client/build')))
// This solves the "Not found" issue when loading an URL other than index.html.
app.get('/*', (req, res) => //n3
res.sendFile(path.join(__dirname + '/client/build/index.html'), err =>
if (err) res.status(500).send(err)
)
)
【讨论】：
以上是关于页面在刷新时不加载 - react-router-dom的主要内容，如果未能解决你的问题，请参考以下文章
带有 BrowserRouter / browserHistory 的 React-router 在刷新时不起作用
带有 BrowserRouter / browserHistory 的 React-router 在刷新时不起作用