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

Question

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

我注意到如果我在页面名称前添加 #，例如页面呈现的 http://localhost:1234/#/profile。所以我很困惑为什么我需要我不想要的 # 而我正在使用 react-router-dom，所以不需要 #。

我将 historyApiFallback 添加到我的 webpack.config 中，但这不起作用。谁能帮我这个？我是新手，我想尽可能多地学习。我们将不胜感激您的帮助!

应用程序.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;

导航栏.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;

包.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"
  }
}

更新

包.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 中的 anchor 标记相同，您停留在同一页面上但滚动到它的特定部分。例如，下面将您滚动到页面的投资组合部分。

<a href="www.page.com/#portfolio">Portfolio</a>

如果省略#，则不同。这会告诉您的服务器重新加载页面并访问该位置。在你的情况下 http://localhost:1234/profile服务器未知，因为您尚未在服务器端指定它。在这些情况下，您需要创建路由或在找不到路由时代理请求。

当您使用作为客户端路由器的 react-router 时，服务器需要提供相同的文件，因此您应该使用代理选项。

使用 http-server 时 the docs假设您可以添加 -P 或 --proxy 标志来指定它。

-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -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所以你有一个工作示例。