Problem with Component Redirection in React. // Problema redireccion de componente con React

Hello, how are you? Let me describe my problem and attach the code…
I’ve finished my portfolio, and within it, there’s a component that showcases one of the three projects I worked on, currently, only the “calculator” project is loaded. The issue is that on localhost, it redirects to the component and displays it as “/project”, but when I publish the page on Netlify, there’s a 404 error.

This is my web page: https://joaquinsancheztonani.netlify.app/
This is the component: J-S-T => It doesn’t work.

Entry point

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { createBrowserRouter , RouterProvider } from 'react-router-dom';
import Calculator from './components/calculadora/calculator';
import Header from './header-proyects/header';

const rutas = createBrowserRouter([
  {
    path: '/',
    element: <App />
  },
  {
    path: '/project',
    element:  (
    <div>
      <Header /> 
      <Calculator />
    </div>)
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={rutas}></RouterProvider>
  </React.StrictMode>
);

Calculator component

import React from "react";
import './calculator.css';
import { useState } from "react";
import * as math from 'mathjs';

function Calculator(){
    const resolve = () => {
        try {
          const result = math.evaluate(answer);
          setAnswer(result.toString());
        } catch (error) {
          setAnswer("Error");
        }
      };

    const clear = () =>{
        setAnswer(' ');
    };

    const show = event =>{
        const contenido = event.target.innerText;
        setAnswer(answer + contenido);
    };

    const [answer,setAnswer] = useState('');


    return(
        

        <div className="component">
            <div className="calculator-component">
                <div className="calculator-component-answer">
                    {answer}
                </div>
                <div className="calculator-component-conteiner">
                    <div className="row">
                        <button onClick={show} className="button">1</button>
                        <button onClick={show} className="button">2</button>
                        <button onClick={show} className="button">3</button>
                        <button onClick={show} className="button fondo-operador">+</button>
                    </div>
                    <div className="row">
                        <button onClick={show} className="button">4</button>
                        <button onClick={show} className="button">5</button>
                        <button onClick={show} className="button">6</button>
                        <button onClick={show} className="button fondo-operador">-</button>
                    </div>
                    <div className="row">
                        <button onClick={show} className="button">7</button>
                        <button onClick={show} className="button">8</button>
                        <button onClick={show} className="button">9</button>
                        <button onClick={show} className="button fondo-operador">*</button>
                    </div>
                    <div className="row">
                        <button onClick={resolve} className="button"> = </button>
                        <button onClick={show} className="button">0</button>
                        <button onClick={show} className="button">.</button>
                        <button onClick={show} className="button fondo-operador">/</button>
                    </div>
                    <div className="row">
                        <button onClick={clear} className="clear">Clear</button>
                    </div>
                </div>
            </div>
        </div>
    );  
};

export default Calculator;

Anchor link redirection

import React from "react";
import './projects.css';
import ComponenteProjects from "./componente-projects";

function Projects(){
    return(
    <div className="espaciado">
        <div id="projects" className="projects-contenedor">
            <h3  className="tittle-education">Projects</h3>
            <div>
                <ComponenteProjects ruta='/project' img='calculadora' name='Calculator' text= 'React /n Javascript /n Hooks: useState()'   />
                <ComponenteProjects img='oshinogod' name='Project2' text='Project2'/>
                <ComponenteProjects img='oshinogod' name='Project3' text='Project2'/>
            </div>
        </div>
    </div>
    )
}

export default Projects;

REMEMBER, IT DOES WORK IN LOCALHOST: BUT IT DOESN’T WORK IN NETLIFY

Thank you so much!

Hello :wave:t6: @Joaquin-Sanchez-Tona !

You need to make sure that the routing is set up correctly for both local development and when the site is deployed on Netlify. The most common cause for this issue is that the server-side routing is not set up properly in the deployed environment.

Netlify provides a “_redirects” file or a “netlify.toml” file to handle redirects and rewrites. Can you check and ensure you have configured the file correctly to handle your client-side routing? Make sure there are rules to redirect all requests to your main index.html file, where your React application will handle the routing.

For example, in your “_redirects” file or “netlify.toml” file, you’ll need to add the following rule:

/*    /index.html   200

I recommend you take a look at this documentation:

This rule ensures that any request made to the server is redirected to the “index.html” file.

1 Like

That’s correct, the problem was the absence of the netlify.toml file, only with this inside the file:

# netlify.toml
[build]
  command = "npm run build"
  publish = "build"

[prerender]
  enabled = true
  include = "/*"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Thank you so much for help me!!!