I can't figure out how to correctly route my components in my code

Question

App.jsx

import { useState } from 'react';
import './App.css';
import { FaFacebook } from 'react-icons/fa';
import { Link, Routes, Route } from 'react-router-dom';


function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

      
  return (
    <div className='outer'>
      <div className='inner'>
        <h2 className='heading'>Instagram</h2>
        <input
          id="username"
          type="text"
          placeholder='Phone number, username, or email'
          value={username}
          onChange={(e) => {
            setUsername(e.target.value);
          }}
        />
        <input
          id="password"
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => { setPassword(e.target.value) }}
        />
        <button className='btn'>Login</button>
        <p style={{ margin: '19px 37px', color: '#ccc', }}>-----------------------OR-----------------------</p>
        <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="link">
          <FaFacebook size={18} color="#1877f2" className='icon' style={{ marginRight: '8px' }} />
          Login with Facebook
        </a>

        <a href="/" style={{ color: 'black', margin: '10px 40px 0 129px' }}>forgot password?</a>
      </div>

     

      <div className='second-div'>
        Don't have an account? <Link to="/signup">Sign up</Link>
      </div>
    </div>
  );
}

export default App;

Main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter,Routes,Route } from 'react-router-dom'
import Signup from '../component/Signup.jsx'

<Routes>
  {/* Use Route to render content when the path matches */}
  <Route path="/signup" element={<Signup />} />

</Routes>


ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

Signup.jsx

import React from 'react'

export default function Signup() {
    return (
        <h1 style={{backgroundColor:'green'}}>hey folks you are in singup page</h1>
    )
}

Trying to create instagram login clone, these are my files what's happening is when i click on the Signup link (<div className='second-div'>Don't have an account? <Link to="/signup">Sign up</Link></div>) in the App.jsx it is showing that the url is changed in address bar but it isn't rendering the signup component. And i can't seem to find why i am very new to this react routing thing and appreciate any help. Here is the image of the address bar and the component that is renedering. (https://github.com/s-chuck/react-projects/blob/main/instagram%20login%20page/Screenshot%202024-02-04%20212743.png)

Answer 1

The file name is Singup.jsx or Signup , Please check and confirm it.

And use this code In your Main.jsx file:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter,Routes,Route } from 'react-router-dom'
import Signup from '../components/Signup.jsx'




ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Routes>
  {/* Use Route to render content when the path matches */}
  <Route path="/" element={<App />} />
  <Route path="/signup" element={<Signup />} />

</Routes>
  </BrowserRouter>
)