Why if I refresh a page using React-Router-Dom i get cannot get

Question

It might be a duplicate of this

but, I do not understand much, I don't know if I'm using webpack, I don't know what webpack is.

If I want to refresh the page or if I enter the url 'www.site.com/something ' I always get 'cannot get /something'

So can someone help me particularly, because I couldn't find anything on Google, or here.

This is my 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"
    ]
  }
}

I uploaded this on Heroku.

and this is my 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;

and the 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}`));

This is because refreshing the page hits the backend (as opposed to navigating to that route on the frontend) and your server doesn't have that route defined. You need a catch all route in your server that just returns the `index.html`. Check this post for a detailed explanation: https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually — Jayce444, Jan 19 '21 at 01:28
@Jayce444 I got a firebase backend, I didn't create one on my own — Mammoon, Jan 19 '21 at 01:36
You literally posted an express server in your question. Is that not the server you're using? If it is you need to add a catch all route to that express server, below the `/` one you've defined. Nothing to do with Firebase — Jayce444, Jan 19 '21 at 01:38

score 0 · Answer 1 · answered Jan 19 '21 at 01:22

Webpack is a module bundler for assets/files, you can read more about it here. It's used by create-react-app under the hood to manage assets. Now, I'm not sure if the error you're facing is a duplicate of the link you've shared, if it's, you can go ahead and eject from create-react-app and add the necessary changes as described. Otherwise, it might be a router issue and Heroku config issue is not able to handle the routes.

Why if I refresh a page using React-Router-Dom i get cannot get

1 Answers1