DOM 渲染不同与相同 url

Question

我最近使用 npm 运行构建构建了我的反应前端，我得到了以下文件夹：

我将所有文档复制并粘贴到我的 nodejs 后端的公用文件夹中

当我启动服务器时，它运行良好，并且我的 Reactjs 通过服务器按预期呈现。

但我有一个问题：

如果我浏览该页面，它似乎可以正常工作，这里是一个示例，我将 go 转到 /register 页面

当我尝试访问同一页面但通过直接键入链接 localhost:8080/register 时出现问题，因为页面呈现完全不同：

我进行了研究，据我了解，这是由于 React-routes 不会导致重新渲染，但我找不到解决问题的方法。

require('dotenv').config({path:__dirname+'/.env'})
const express = require('express');
const db = require('./routes/db-config.js');
const bodyParser = require('body-parser')
const app = express();
const cookie = require('cookie-parser');
const path = require('path');
const morgan = require('morgan');
const cors = require('cors')
const port = process.env.PORT

app.use(bodyParser.urlencoded({
    extended:true
  }));

app.use(bodyParser.json());

app.use(cors())

db.connect((error)=>{
    if(error) throw error;
    console.log("Connected to DataBase");
})

app.use(express.static(path.join(__dirname + "/public"))) //Le especifico donde esta mi front end

app.use(morgan('tiny'));



app.use(cookie())
app.use(express.json())



app.use("/",require('./routes/routes.js'))
app.use("/api",require("./controllers/user-auth/auth.js"))
app.use("/gestion-inventario",require("./controllers/gestion-inventarios/Herramienta-Basica/registro_insumos.js"))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

我的路线指定如下

const express = require('express');
const loggedIn = require('../controllers/user-auth/loggedIn.js');
const logout = require('../controllers/user-auth/logout.js');
const router = express.Router();
const db = require('./db-config.js');

router.get("/",loggedIn,(req,res)=>{
    console.log(req.user)
    if(req.user){
        res.send('Hello World! Home')
    } else{
        res.send('Hello World! Home not loggedIn')
    }
})

router.get("/*",(req,res)=>{
    res.sendStatus(200)
})



router.get("/gestion-inventario",loggedIn,(req,res)=>{
    if(req.user){
        const {id_Empresa} = req.user
        db.query('SELECT * FROM Inventario_insumos WHERE id_Empresa = ?',[id_Empresa], async (Err,result)=>{
            if(Err) throw Err;
            res.status(200).json({status:"success",success:result})   
        })

    } else{
        res.send('Not loggedIn')
    }
})

我的 reactApp 有以下路线

import {BrowserRouter, Routes,Route} from 'react-router-dom';
import {Error, Login, Dashboard, Register,Landing} from './pages';



function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Landing/>}/>
        <Route path="/register" element={<Register/>}/>
        <Route path="/login" element={<Login/>}/>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </BrowserRouter>


  );
}

export default App;

我将不胜感激任何帮助。

Answer 1

经过研究，我发现了以下解决方案https://github.com/jintoppy/react-training/blob/master/basic/node_modules/react-router/docs/guides/Histories.md#browserhistory

并合并了以下解决问题的代码

router.get('*', function (request, response){
response.sendFile(path.join(__dirname + '/../public', 'index.html'))})