为啥如果我使用 React-Router-Dom 刷新页面我无法获得

Posted 2023-02-22

【中文标题】为啥如果我使用 React-Router-Dom 刷新页面我无法获得

【英文标题】：Why if I refresh a page using React-Router-Dom i get cannot get为什么如果我使用 React-Router-Dom 刷新页面我无法获得

【发布时间】：2021-04-23 07:45:50

【问题描述】：

它可能与此重复

React-router v4 - cannot GET *url*

但是，我不是很懂，不知道是不是用webpack，不知道webpack是什么。

如果我想刷新页面或者如果我输入 url 'www.site.com/something' 我总是得到'cannot get /something'

所以有人可以特别帮助我，因为我在 Google 或这里找不到任何东西。

这是我的 package.json

  "name": "s",
  "version": "0.1.0",
  "private": true,
  "main":"server.js",
  "engines": 
    "npm":"6.14.8",
    "node": "14.15.1"
  ,
  "dependencies": 
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "css-loader": "^5.0.1",
    "express": "^4.17.1",
    "firebase": "^8.2.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "style-loader": "^2.0.0",
    "uuid": "^8.3.2",
    "web-vitals": "^0.2.4"
  ,
  "scripts": 
    "heroku-postbuild":"npm install",
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

我在 Heroku 上上传了这个。

这是我的 App.js

import './App.css';

import makeStyles from '@material-ui/core';

import BrowserRouter as Router, Switch, Route, Link from 'react-router-dom';

import  Drawer, List, ListItem, ListItemIcon, ListItemText  from '@material-ui/core';

import HomeIcon from '@material-ui/icons/Home';
import SlideshowIcon from '@material-ui/icons/Slideshow';
import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
import Home from './containers/Home/Home';
import SlideShow from './containers/AddSlideshow/AddSlideshow';
import Gallery from './containers/AddGallery/AddGallery';
const useStyles = makeStyles((theme) => (
  drawerPaper: width: 'inherit',
  link:  textDecoration:'none', color: theme.palette.text.primary
  ));

  
function App() 
  const classes = useStyles();
  return (
   <Router>
     <div style=display:'flex'>
      <Drawer
      style=width:'220px'
      variant="persistent"
      anchor="left"
      open=true
      classes=paper: classes.drawerPaper
      >
      <h1 style=textAlign:'center', color:'#000', letterSpacing:"1.5px", fontWeight:"400">BILTMORE CARE Dashboard</h1>
      <Link to="/" className=classes.link>
           <ListItem button>
              <ListItemIcon>
                <HomeIcon />
              </ListItemIcon>
              <ListItemText primary="Home"/>
                
            </ListItem>
           </Link>
           <Link to="/slideshow" className=classes.link>
           <ListItem button>
              <ListItemIcon>
              <SlideshowIcon />
              </ListItemIcon>
              <ListItemText primary="SlideShow"/>
                
            </ListItem>
           </Link>
           <Link to="/gallery" className=classes.link>
           <ListItem button>
              <ListItemIcon>
                <PhotoLibraryIcon />
              </ListItemIcon>
              <ListItemText primary="Gallery"/>
                
            </ListItem>
           </Link>
      </Drawer>
      <Switch>
        <Route exact path="/" component =Home></Route>
        <Route exact path="/slideshow" component =SlideShow></Route>
        <Route exact path="/gallery" component =Gallery></Route>
      </Switch>
     </div>
   </Router>
  );


export default App;

和 server.js

const express = require("express");
// eslint-disable-next-line no-unused-vars
// const bodyParser = require('body-parser');
const path = require("path");
const app = express();
const port = process.env.PORT || 8080;

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

// This route serves the React app
app.get('/', (req, res) => res.sendFile(path.resolve(__dirname, "build", "index.html")));

app.listen(port, () => console.log(`Server listening on port $port`));

【问题讨论】：

这是因为刷新页面会碰到后端（而不是在前端导航到该路由）并且您的服务器没有定义该路由。您需要在服务器中设置一条只返回index.html 的全部路由。查看此帖子以获得详细说明：***.com/questions/27928372/…

@Jayce444 我有一个 Firebase 后端，我没有自己创建一个

您确实在您的问题中发布了一个快速服务器。这不是您使用的服务器吗？如果您需要在您定义的/ 下方添加一条到该快速服务器的全部路由。与 Firebase 无关

我这样做只是为了将它上传到 Heroku

【参考方案1】：

Webpack 是资产/文件的模块捆绑器，您可以阅读更多关于它的信息here。 create-react-app 在后台使用它来管理资产。现在，我不确定您遇到的错误是否与您共享的链接重复，如果是，您可以继续从create-react-app 弹出并按照说明添加必要的更改。否则，可能是路由器问题，Heroku 配置问题无法处理路由。