Why aren't my form components rendering on their routes?

Question

My forms are not rendering when my server is ran.

Current unique file structure is as follows: src > Components > login.component.js src > Components > login.component.js

There are no errors being shown in the terminal, so not sure if it is a syntax error which is causing nothing to show when the server is ran. Any thoughts?

login.component.js

import React, { Component } from "react";
export default class Login extends Component {
    render() {
        return (
            <form>
                <h3>Sign In</h3>
            </form>
        );
    }
}

signup.component.js

export default class SignUp extends Component {
    render() {
        return (
            <form>
                <h3>Sign Up</h3>
            </form>
        );
    }
}

App.js

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Login from "./components/login.component";
import SignUp from "./components/signup.component";
function App() {
  return (<Router>
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/sign-in"}>Link name</Link>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-in"}>Login</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className="auth-wrapper">
        <div className="auth-inner">
          <Routes>
            <Route exact path='/' component={Login} />
            <Route path="/sign-in" component={Login} />
            <Route path="/sign-up" component={SignUp} />
          </Routes>
        </div>
      </div>
    </div></Router>
  );
}
export default App;

Index.js

import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);
serviceWorker.unregister();

Answer 1

I believe your routes tag should be on the top level of your app.js in order for it to work. In the code you shared, it's actually down below inside another div which is probably causing your form to not render.

Answer 2

Try changing component to element if you are using react-router-dom 6.x.x:

<Routes>
  <Route exact path='/' element={<Login />} />
  <Route path="/sign-in" element={<Login />} />
  <Route path="/sign-up" element={<SignUp />} />
</Routes>