那些遇到过的问题

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

med*_*v21 7 javascript reactjs react-router-dom

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

我注意到如果#在页面名称之前添加，例如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;
Run Code Online (Sandbox Code Playgroud)

导航栏.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;
Run Code Online (Sandbox Code Playgroud)

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

包.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"
  }
}
Run Code Online (Sandbox Code Playgroud)

更新

在此处输入图片说明

包.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"
  }
}
Run Code Online (Sandbox Code Playgroud)

配置文件

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

在此处输入图片说明

Roy*_*ers 3

http://localhost:1234/#/profile起作用的原因是 # 不会重新加载页面。它的行为与 HTML 中的锚标记相同，您可以停留在同一页面上，但滚动到该页面的特定部分。例如，下面将您滚动到页面的投资组合部分。

<a href="www.page.com/#portfolio">Portfolio</a>
Run Code Online (Sandbox Code Playgroud)

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

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

使用http-server 文档时，您可以添加 -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\""
Run Code Online (Sandbox Code Playgroud)

另一种选择是用于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.
  }
},
Run Code Online (Sandbox Code Playgroud)

然后在你的 package.json 中添加一个脚本并使用npm run watch

"watch": "webpack-dev-server --hot --progress --mode development",
Run Code Online (Sandbox Code Playgroud)

注意：确保您的 dist 文件夹中index.html存在该文件。如果不是，您将会遇到问题。

我已经在 GitHub 上创建了一个基本项目，因此您有一个工作示例。

归档时间：

查看次数：

3480 次

最近记录：

6 年 前
相关归档
将Unicode字符插入JavaScript 118
JavaScript - 获取HTML表单值 85
ES6中的箭头功能中"this"指的是什么？ 48
在React.js中编辑丰富的数据结构 46
使用PUBLIC_URL创建反应应用程序构建 44
无法使用webpack加载png文件,意外的字符 30
不支持的服务器组件类型：undefined/next js 13 23
在react-create-app中使用babel加载程序的问题 12
Tailwind CSS 在 Vite + React 中不起作用 10
React 中具有静默刷新的隐式流 9
难疑归档
JavaScript中使用"严格"做什么,背后的原因是什么？ 7339
Java是"通过引用传递"还是"传递价值"？ 6270
最终C++书籍指南和列表 4246
如何从SQL Server中的SELECT更新？ 3546
如何在Python中延迟时间？ 2638
显示两个修订版之间已更改的文件 2041
如何更改一个特定提交的提交作者？ 1949
如何将Git托管项目中的所有本地更改还原到以前的状态？ 1830
我在哪里可以找到有关在JavaScript中格式化日期的文档？ 1381
npm在没有sudo的情况下抛出错误 1218