gpt4 book ai didi

reactjs - 找不到生产抛出文件中的哈希路由错误

转载 作者:行者123 更新时间:2023-12-03 12:39:16 24 4
gpt4 key购买 nike

我正在使用 Electron react 样板,并想在新的BrowserWindow中打开一个组件。如何执行此操作有多个问题和答案,但是打包应用程序后,这些问题和答案都无法正常工作。
我发现的问题/答案:

  • How to handle multiple windows in Electron application with React.JS?
  • electron-react-boilerplate :sub window on clicking a button
  • https://stackoverflow.com/a/47926513/3822043

  • 在我的组件中,我尝试使用以下几行打开一个通往其他路线的新窗口。
    wind.loadURL(`file://${__dirname}/app.html#/video`)

    wind.loadURL(`file://${Path.join(__dirname, '../build/app.html#/video')}`)

    wind.loadURL(`file://${Path.join(__dirname, '../build/index.html#/video')}`)
    第一个在运行 yarn 开发人员时起作用,但不在生产中。它们都为各自的路径抛出ERR_FILE_NOT_FOUND。
    这是我的路线设置方式:
    export default function Routes() {
    return (
    <App>
    <HashRouter>
    <Route exact path={routes.HOME} component={HomePage} />

    <Route path={routes.VIDEO} component={VideoPage} />
    </HashRouter>
    </App>
    );
    }
    使用React的路由器打开新的BrowserWindow时,是否有一种简单的方法来允许路由?

    最佳答案

    很好的时机。过去几天我在同一条船上,只是想通了。除此以外,我没有像您一样更改为HashRouter。而是我保留了所有的路由内容,就像默认的electron-react-boilerplate一样,就像ConnectedRouter一样。也许任何一种方法都可以。
    https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/1853#issuecomment-674569009__dirname仅适用于dev。我使用DebugTron来检查为每个资源加载了哪些URL,它是file://path/to/app.asar/something。然后我想出了通往阿萨尔(Asar)的途径。无论应用程序位于何处,这对我来说都适用于dev和prod。您还需要设置nodeIntegration: true。在macOS上测试。

    const electron = require("electron")
    //...
    win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#/yourroutename`)
    如果有人还想知道如何加载另一个页面并将参数传递给它,则为更完整的示例:
    import routes from '../constants/routes.json'
    const electron = require("electron")
    // ...
    var win = new BrowserWindow({
    width: 400, height: 400,
    webPreferences: { nodeIntegration: true }
    })
    win.loadURL(`file://${electron.remote.app.getAppPath()}/app.html#${routes["ROOM"]}?invitationCode=${encodeURIComponent(code)}`)
    win.show()
    并在组件中加载路线:
    const queryString = require('query-string')
    // ...
    constructor(props) {
    super(props)
    const params = queryString.parse(location.hash.split("?")[1])
    this.invitationCode = params.invitationCode
    }

    关于reactjs - 找不到生产抛出文件中的哈希路由错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63368468/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com