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!