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

问题描述

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 {

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,

Route,
Switch,
Link
} from "react-router-dom";



class App extends Component {

render() {
    return (
        <Router>
        <div className="App">
        <Header/>
        <div className="main">
        <Switch>
        <Route path="/register" component={Register} />
        <Route path="/login" component={Login} />
        <Route path="/logout" component={Logout} />
        <Route path="/myresume" component={MyResume} />
        <Route path="/resume/:id" component={Resume} />
        <Route path="/addresume" component={AddResume} />
        <Route path="/editresume/:id" component={EditResume} />
        <Route path="/" component={Index} />
        </Switch>

        </div>
        </div>
        </Router>
);
}

}

export default App;

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

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

阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题