Как остановить expressJS маршрутов с указанием «невозможно получить / somepath» в браузере?

Question

Я работаю над проектом с реагировать, и во внешнем интерфейсе создается маршрут к уникальному маршруту, идея в том, что все это будет одной страницей, поэтому я не хочу использовать express и создавать отдельный файл html для обработки нового маршрута. Я хочу использовать тот же файл html, который создал маршрут. Я sh буду использовать express по другим причинам. Я использую сокеты и express для обработки некоторых вещей, связанных с маршрутизацией.

В любом случае, как бы мне сделать так, чтобы новый маршрут не означал новую страницу? Я хочу, чтобы все это обрабатывалось одним индексным файлом, и я не хочу, чтобы страница также обновлялась, потому что тогда она потеряет свое текущее состояние.

извините за мой плохой английский sh, я не знаю как это объяснить очень хорошо. Вот мой код, если это помогает.

frontend.jsx

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link, useLocation } from "react-router-dom";
import io from "socket.io-client";

var socket = io();

class CreateRoom extends Component {
    state = {
        room: "apple",
    };
    render() {
        return (
            <React.Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col s10 offset-s1 m8 offset-m2 l6 offset-l3" id="room_create_body">
                            <h3 className="center-align" id="service_title">
                                Create a
                                <b style={{ color: "#ffba14" }}>
                                    &nbsp;
                                    <u>nuke</u>
                                    &nbsp;
                                </b>
                                room!
                            </h3>
                            <Router>
                                <Link to={this.state.room}>
                                    <p className="center-align">
                                        <input
                                            id="create_room"
                                            type="submit"
                                            value="Create"
                                            onClick={this.onRequestRoom}
                                        />
                                    </p>
                                </Link>
                            </Router>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
    onRequestRoom = () => {
        socket.emit("create-room");

        socket.on("new-room", (ID) => {
            this.setState({ room: ID });
        });
    };
}

export default CreateRoom;

backend. js

const express = require("express");
const app = express();

const http = require("http").Server(app);
const io = require("socket.io")(http);

const path = require("path");
const crypto = require("crypto");

const PORT = 60;

app.use(express.static(path.join(__dirname, "client/build")));

app.get("/", function (req, res) {
    res.sendFile(path.join(__dirname, "client/public/", "index.html"));
});

io.on("connection", function (socket) {

    console.log("user connected");
    socket.on("create-room", function (data) {

        let randRoomID = crypto.randomBytes(4).toString("hex");
        console.log("Room " + randRoomID + " is being generated...");
        io.to(socket.id).emit("new-room", randRoomID);

    });
});


http.listen(PORT, function () {
    console.log("server started using port: " + PORT);
});

Answer 1

Используйте Hashrouter вместо Browserrouter.