I got 404 error on every page except the main pain

Support
1

Problem:
If i try https://64ebed9c5e382138f0e87c78--unique-chimera-8c6a37.netlify.app, I can access my website, but if I want to access “/chat” (https://64ebed9c5e382138f0e87c78--unique-chimera-8c6a37.netlify.app/chat), then 404 error shows up.

Also, If i try this link (the link under Deploys > Production) https://64ec05457acdd648c57b9d30--unique-chimera-8c6a37.netlify.app/ even the main page has 404 error.

I already checked that there is Routing issue by using serve.

I defined all the routes in App.js:

import Chat from "./components/Chat/Chat";
import Join from "./components/Join/Join";

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";

function App() {
  const ENDPOINT =
    "https://just-another-chat-app-backend-9d7d3fbb23f6.herokuapp.com";
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Join endpoint={ENDPOINT} />} />
        <Route path="/chat" element={<Chat endpoint={ENDPOINT} />} />
      </Routes>
    </Router>
  );
}

export default App;

Please help.
Thanks!

site: https://64ebed9c5e382138f0e87c78--unique-chimera-8c6a37.netlify.app
the error message is: https://64ebed9c5e382138f0e87c78--unique-chimera-8c6a37.netlify.app/chat 404
deploy log: 10:33:47 PM: Starting post processing

10:33:47 PM: Skipping HTML post processing

10:33:47 PM: Post processing - header rules

10:33:47 PM: Post processing - redirect rules

10:33:47 PM: Post processing done

10:33:48 PM: Section completed: postprocessing

10:33:49 PM: Site is live :sparkles:

2

Hi @seazon,

Thanks for reaching out and welcome to Netlify’s Support Forums!

Could you try adding a _redirect file as outlined in this Support Guide:

If you have any questions, please let us know. Thanks!

3

Hi Melvin,

I created another super simple react app, and tried that again, it still shows 404 error.
I already added _redirects to my ./build folder (i also tried adding _redirects to ./public folder), and changed to using “build”: “react-scripts build && cp build/index.html build/404.html”, in my package.json file,

This is my App.js:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

This is my index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
4

Hi @seazon,

Thanks for the follow-up.

You added the _redirect file or a netlify.toml file?

For an SPA like React, especially if using React Router, you will generally want a single rule as outlined in in the Support Guide linked above:

netlify.toml

[redirects]

from = "/*"

to = "/index.html"

status = 200

You can read more about the netlify.toml file here.

If you want to use a _redirect file instead:

_redirects

/* /index.html 200

For the _redirect file, you’ll save this in your publish directory. You can read more about redirects here.