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

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?

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

CodePudding user response：

You are using the react-router-dom@5 Route component API. RRDv6 routes no longer use component, and render and children function props, instead they were replaced by a single element prop that takes a ReactElement, a.k.a. JSX.

You are also nesting a router within a router. Since App is already wrapped by a BrowserRouter you should remove the nested BrowserRouter in App.

function App() {
  return (
    // remove Router that was here
    <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 path='/' element={<Login />} /> // components on element prop
            <Route path="/sign-in" element={<Login />} />
            <Route path="/sign-up" element={<SignUp />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}

CodePudding user response：

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.

CodePudding user response：

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>