我不知道如何在代码中正确路由组件

Question

应用程序.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>

      {/* Routes should be wrapped around your content */}

      <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>
)

Singup.jsx

import React from 'react'

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

尝试创建 Instagram 登录克隆，这些是我的文件，当我单击“注册”链接时发生的情况 (

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

) 在 App.jsx 中，它显示地址栏中的 url 已更改，但它没有呈现注册组件。我似乎不明白为什么我对这个反应路由很陌生，并且感谢任何帮助。

Answer 1

文件名为 Singup.jsx 或 Signup ，请检查并确认。