为什么如果我使用 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 的全部路由。查看此帖子以获得详细说明：stackoverflow.com/questions/27928372/…
@Jayce444 我有一个 Firebase 后端，我没有自己创建一个
您确实在您的问题中发布了一个快速服务器。这不是您使用的服务器吗？如果您需要在您定义的/ 下方添加一条到该快速服务器的全部路由。与 Firebase 无关
我这样做只是为了将它上传到 Heroku

标签： reactjs heroku react-router-dom

【解决方案1】：

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

【讨论】：