如何在 Electron + React App 中创建路由

Question

大家好 Js 脚本家族，

目前我正在基础级别的 Electron + React js 项目上工作，我已经成功创建了项目，但现在我需要继续进行路由过程。但我坚持下去并收到如下错误

> (node:12411) electron: Failed to load URL:
> file:///opt/lampp/htdocs/electron/employee-management/addemployee with
> error: ERR_FILE_NOT_FOUND (Use `electron --trace-warnings ...` to show
> where the warning was created)

我按照下面的方法进行路由

-> install react router
npm install --save react-router-dom

在 index.js 文件中导入反应路由器 dom

import {HashRouter as Router, Route, Switch} from 'react-router-dom';

我的index.js文件

import React from 'react';
import ReactDom from 'react-dom';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import {Home} from './components/Home';
import { AddEmployee } from './components/AddEmployee';

import '../public/css/style.css';
ReactDom.render(
    <Router>
        <Switch>
            <Route path="/" component={ Home }>
                <Home />
            </Route>
            <Route exact={true} path="/addemployee" component={ AddEmployee }>   
                <AddEmployee />
            </Route>
        </Switch>
    </Router>,
    document.getElementById('root')
);

和我添加 href nav 的头文件

import React from 'react';
import { Container, Button, Navbar, Nav, NavItem, NavDropdown, MenuItem, Form, FormControl } from 'react-bootstrap';

export const Header = () => {
    return (
        <>
        
            <Navbar bg="dark" variant="dark">
                <div className="container-fluid">
                    <Navbar.Brand href="">Employee Management</Navbar.Brand>
                    <Nav className="me-auto">
                        <Nav.Link href="./addemployee">Add Employee</Nav.Link>
                    </Nav>
                    <Form className="d-flex">
                    <FormControl
                        type="search"
                        placeholder="Search"
                        className="mr-2"
                        aria-label="Search"
                    />
                    &nbsp;&nbsp;<Button className="ml-3" variant="outline-secondary">Search</Button>
                    </Form>
                </div>
            </Navbar>
        
        </>
    )
}

希望你们理解我的问题。

还有一件事是我独立创建了这个单一目录项目。首先创建电子项目并在安装后反应并使用反应组件渲染文件。

提前致谢

Answer 1

据我从参数名称可以看出，您正在通过 href 进行路由。但是，您使用的是 HashRouter。您应该改为将哈希推送到历史记录。

使用 Router Link 而不是 React Bootstrap 中的 link，我相信您也可以将其作为组件提供给 bootstrap 组件。

或：

const history = useHistory();
//...
history.push("/addemployee"); //in the onClick handler

如何在 Electron + React App 中创建路由

How to create route in Electron + React App

javascript

node.js

reactjs

electron