为什么我的表单组件不在其路由上呈现？

Question

当我的服务器为运行时，我的表单未呈现。

当前唯一文件结构如下： src > 组件 > login.component.js src > 组件 > login.component.js

终端中没有显示任何错误，因此不确定是否是语法错误导致在服务器运行时不显示任何内容。有什么想法吗？

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

我认为您的 routes 标签应该位于 app.js 的顶层，这样才能正常工作。在您共享的代码中，它实际上位于另一个 div 的下方，这可能导致您的表单无法呈现。

Answer 2

如果您正在使用 react-router-dom，请尝试将 component 更改为 element 6.x.x:

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

Answer 3

您正在使用 react-router-dom@5 Route 组件 API。 RRDv6 路由不再使用 component、render 和 children 函数属性，取而代之的是使用 ReactElement、a.k.a。 JSX.

您还在路由器中嵌套了一个路由器。由于 App 已经被 BrowserRouter 包裹，您应该删除 App.

中嵌套的 BrowserRouter

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

为什么我的表单组件不在其路由上呈现？

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

reactjs

react-router

react-component