I am having trouble with my React application using react-router-dom where my components are not rendering correctly when navigating to different routes. Here are the details of my setup:
App.js:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Register from './components/Register';
import Login from './components/Login';
import Companies from './components/Companies';
import './App.css';
function App() {
return (
<Router>
<div className="App">
<header className="App-header">
<h1>Welcome to Medicinska Oprema App</h1>
<p>Your React application is running!</p>
</header>
<Switch>
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Route path="/companies" component={Companies} />
</Switch>
</div>
</Router>
);
}
export default App;
Register.js:
import React, { useState } from "react";
import axios from 'axios';
const Register = () => {
const [formData, setFormData] = useState({
email: '',
password: '',
firstName: '',
lastName: '',
city: '',
country: '',
phoneNumber: '',
occupation: '',
company: ''
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
axios.post('/api/users/register', formData)
.then(response => {
alert('Registration successful!');
})
.catch(error => {
alert('Error registering user.');
});
};
return (
<div>
<h1>Register Component</h1>
<form onSubmit={handleSubmit}>
<input type="text" name="email" value={formData.email} onChange={handleChange} placeholder="Email" />
<input type="password" name="password" value={formData.password} onChange={handleChange} placeholder="Password" />
<input type="text" name="firstName" value={formData.firstName} onChange={handleChange} placeholder="First Name" />
<input type="text" name="lastName" value={formData.lastName} onChange={handleChange} placeholder="Last Name" />
<input type="text" name="city" value={formData.city} onChange={handleChange} placeholder="City" />
<input type="text" name="country" value={formData.country} onChange={handleChange} placeholder="Country" />
<input type="text" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} placeholder="Phone Number" />
<input type="text" name="occupation" value={formData.occupation} onChange={handleChange} placeholder="Occupation" />
<input type="text" name="company" value={formData.company} onChange={handleChange} placeholder="Company" />
<button type="submit">Register</button>
</form>
</div>
);
};
export default Register;
When I navigate to http://localhost:3001/register, the page does not display the Register component. Instead, it shows the default “Edit src/App.js and save to reload” page.
What I’ve tried:
I have verified that the paths are correct.
I have checked that the components are correctly imported.
I have no errors in the browser console or network tab.
Project Dependencies (package.json):
{
"name": "medicinska-oprema-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.2",
"cross-env": "^7.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.23.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"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 would greatly appreciate any help or suggestions on how to fix this issue. Thank you!