页面在刷新时不加载 - react-router-dom

Question

我有以下页面的基本反应应用程序：主页、个人资料、联系人和经验。我已经为每个页面设置了路由，但是当我转到主页以外的其他页面时，它会呈现，但是当我刷新页面时，页面不会加载。

我注意到如果我在页面名称之前添加#，例如页面呈现的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;

Answer 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，所以你有一个工作示例。

Answer 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) }
  })
})

• 确保始终指向构建路径，即在生产环境中加载所有文件的位置。
• 之后，所有的网址终于都运行良好了！