热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

React修改了Browserrouter为Hashrouter运行yarnbuild,打开页面访问子路由出现访问错误

问题描述React修改了Browserrouter为Hashrouter运行yarnbuild生成的项目但是生成的项目打开页面访问子路由还是出现404错误

问题描述

React修改了Browserrouter为Hashrouter运行yarn build生成的项目
但是生成的项目打开页面访问子路由还是出现404错误
打开index页面访问的域名是file:///D:/client/build/index.html#/
点开子路由后访问的域名是file:///D:/resume/19就出现访问不到错误,错误如下:
找不到您的文件
该文件可能已被移至别处或遭到删除。
ERR_FILE_NOT_FOUND




问题出现的环境背景及自己尝试过哪些方法

react-router-dom的版本为4.2.2
"react-router-dom": "^4.2.2",

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)



App.js里的代码如下
import React, { Component } from 'react';
import logo from './logo.svg';

import {

1
2
3
4
5
6
7
8
9
10
11
12
13
Collapse,

Navbar,

NavbarToggler,

NavbarBrand,

Nav,

NavItem,

NavLink,

UncontrolledDropdown,

DropdownToggle,

DropdownMenu,

DropdownItem,

ListGroup,ListGroupItem

} from 'reactstrap';

import Header from './component/Header.js';
import Index from './component/Index.js';
import Login from './component/Login.js';
import MyResume from './component/MyResume.js';
import Resume from './component/Resume.js';
import Register from './component/Register.js';
import AddResume from './component/AddResume.js';
import EditResume from './component/EditResume.js';
import Logout from './component/Logout.js';

import { HashRouter as Router,

1
2
3
4
Route,

Switch,

Link

} from "react-router-dom";

class App extends Component {

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
render() {

    return (

       

       


       

       


       

       

       

       

       

       

       

       

       

       




       


       


       


);

}

}

export default App;

你期待的结果是什么?实际看到的错误信息又是什么?

yarn build生成的项目路由打开子页面访问正常。打开子页面可以访问到域名为 file:///D:/client/build/index.html#/resume/19 而不是file:///D:/resume/19


   



推荐阅读
  • 本文讨论了将HashRouter改为Router后,页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题,并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • RouterOS 5.16软路由安装图解教程
    本文介绍了如何安装RouterOS 5.16软路由系统,包括系统要求、安装步骤和登录方式。同时提供了详细的图解教程,方便读者进行操作。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 详解react组件通讯方式(多种)
    这篇文章主要介绍了详解react组件通讯方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着 ... [详细]
  • 【CTF 攻略】第三届 SSCTF 全国网络安全大赛—线上赛 Writeup
    【CTF 攻略】第三届 SSCTF 全国网络安全大赛—线上赛 Writeup ... [详细]
  • 一、MVCMVC模式,即软件可以分成三个部分Model、View、Controller。视图(View):用户界面。控制器(Controller):业务逻辑模型(Model):数据 ... [详细]
  • Vue项目之ElementUI(Breadcrumb)动态面包屑效果
    效果面包屑作用面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级原始方式最笨的 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • 本文讨论了在使用Git进行版本控制时,如何提供类似CVS中自动增加版本号的功能。作者介绍了Git中的其他版本表示方式,如git describe命令,并提供了使用这些表示方式来确定文件更新情况的示例。此外,文章还介绍了启用$Id:$功能的方法,并讨论了一些开发者在使用Git时的需求和使用场景。 ... [详细]
  • <!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]
  • 1网络设备驱动的结构Linux网络设备驱动程序体系结构如下图,从上到下依次划分为4层,依次为网路协议接口层、网络设备接口层,提供实际功能的设备驱动功能层以及网络设备与媒介层。 ... [详细]
author-avatar
sdr700724
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有