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

Question

Hello all Js Scripting Family,

Currently I'm working on Electron + React js project at base level i had created project successfully but now i need to move forward to routing process. but i stuck on it and getting error like below

> (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)

I had follow below method for routes

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

import react router dom in index.js file

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

my index.js file

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')
);

and my header file where i had added 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>
        
        </>
    )
}

Hope you guys understand my question.

and one more things is that i had created this single directory project standalone. first create electron project and after install react and use react component for render files.

Thank in advance

Answer 1

You are routing through href as far as I can see from the parameter name. However you are using a HashRouter . You should push the hash to the history instead.

Use a Router Link instead of the link from React Bootstrap, which I believe you can also provide that as a component to the bootstrap component.

or:

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