账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React修改了Browserrouter为Hashrouter运行yarn build,打开页面访问子路由出现访问错误
    39
    0

    问题描述

    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 可能的原因有以下几点:

      1. 代码中使用了新的hash模式,导致Browserrouter和Hashrouter之间无法正常通信。

      2. 配置文件中hash模式的配置错误,导致Browserrouter无法正确解析hash模式的路由。

      3. 确保你在yarn build命令中包含了所有需要的依赖项。

      你可以尝试以下步骤来解决这个问题:

      1. 查看你的项目中的配置文件,确保你在yarn build命令中包含了所有需要的依赖项,包括Browserrouter和Hashrouter。

      2. 如果你的代码中使用了新的hash模式,尝试使用react-router-dom库的HashRouter代替Browserrouter

      3. 如果你在配置文件中配置了hash模式的路由,尝试在配置文件中取消配置新的hash模式。

      4. 如果以上步骤都无法解决问题,可能需要查看Browserrouter和Hashrouter的源代码,找出问题的原因。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部